`
jveqi
  • 浏览: 324003 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

textarea wrap

    博客分类:
  • js
 
阅读更多

通常情况下,当用户在输入文本区域中键入文本后,浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。
如果您希望启动自动换行功能(word wrapping),请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时,浏览器会自动将多余的文字挪到下一行,在文字中最近的那一点换行。

wrap="virtual" 将实现文本区内的自动换行,以改善对用户的显示,但在传输给服务器时,文本只在用户按下 Enter 键的地方进行换行,其他地方没有换行的效果。

wrap="physical" 将实现文本区内的自动换行,并以这种形式传送给服务器,就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器,因为使用自动换行是非常有用的方法。

如果把 wrap 设置为 off,将得到默认的动作

=======================================

Div的内容自动换行(转载)

word-break:break-allword-wrap:break-word都是能使其容器如DIV的内容自动换行

它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。 word-break : normal | break-all | keep-all 参数: normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word 参数: normal :  允许内容顶开指定的容器边界 break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用来代替,不然不能正确换行

分享到:
评论

相关推荐

    textarea

    在本文中,我们将详细介绍如何使`textarea`随内容的高度固定而自动增宽,以及宽度固定时如何自动增高,并对`wrap`属性的几种设置进行详细解释。 ### 自动增宽与自动增高 在默认情况下,`textarea`元素的尺寸是固定...

    技术讲座_Div+Css布局

    <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea>  类似的,可以加入代码到。  2、表单输入单元点击删除:  本列同上则...

    textarea剩余字数

    - `wrap`:定义换行方式,可以设置为`hard`(文本在达到列宽时自动换行)或`soft`(仅在用户输入回车时换行)。 - `autofocus`:页面加载时自动聚焦到`textarea`。 - `placeholder`:提供提示信息,当`textarea`为空...

    textarea用法

    在探讨`textarea`元素及其用法之前,我们先简要回顾一下`textarea`的基本概念。`textarea`是HTML中用于创建多行文本输入控件的一个关键元素,常用于收集用户的大段文本输入,如留言、评论或表单填写中的详细说明部分...

    HTML5&CSS3网页制作:textarea元素.pptx

    `textarea`元素的基本结构非常简单,它以`<textarea>`开始,以`</textarea>`结束,中间包含预设的文本内容。这个元素的主要属性包括`cols`和`rows`,它们用于定义文本区域的可见宽度和高度。 1. `cols`属性:这是一...

    TextArea用法

    <textarea name="myText" id="myText" cols="44" rows="4" wrap="virtual" style="font-family: arial; font-size: 14px; line-height: 17px; height: 77px; overflow: auto;" onkeyup="checkLimits(myForm.myText...

    HTML 语法大全

    自动换行 (`<TEXTAREA WRAP="...">`):** - **用途**: 决定文本输入框是否自动换行。 - **属性**: `wrap` (软换行或硬换行)。 **65. 列表栏 (`<SELECT>`):** - **用途**: 创建列表栏或下拉菜单。 **66. 小字体 (`...

    CSS设计符合Web标准的网页表单的几个技巧

    本文总结了用div css进行网页表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意。...textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">

    html中的textArea使用及实例

    10. `wrap`:控制换行方式,可选"hard"(自动换行)或"soft"(浏览器处理换行)。 三、`textarea`实例 一个简单的`textarea`实例,包含提示信息和固定大小: ```html 请输入你的评论: <textarea id="comment...

    textarea去除多余空格和回车的方法及其属性

    <textarea id="myTextarea" rows="5" cols="30" maxlength="100" required wrap="hard"></textarea> ``` 在JavaScript中,可以使用`trim()`、`replace()`等方法来去除`textarea`中的多余空格和回车。例如,以下代码...

    网页表单设计实例技巧五则

    <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea> ``` 同样的,此功能也可以应用到`<input>`标签中,让用户快速替换预设...

    scrollWidth,clientWidth与offsetWidth的区别

    <textarea wrap="off" onfocus="alert('scrollWidth:' + this.scrollWidth + '\nclientWidth:' + this.clientWidth);"></textarea> ``` 在这个例子中: - 当文本框内的内容没有超过其宽度时,**scrollWidth** ...

    vue + el-input 中 textarea 实现 placeholder 换行

    当涉及到多行文本输入时,`textarea`元素通常会比`input`更合适。在这个场景下,我们可能会遇到一个需求:如何在`el-input`的`textarea`部分实现placeholder的换行,以提供更清晰的提示信息。 首先,让我们理解`...

    div+css页面布局的五个小技巧

    <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea> ``` 2. **表单输入单元点击删除**: 如果希望用户点击输入框后自动清除...

    如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

    然而,这两种元素在默认情况下可能会存在一些限制,如`<pre>` 不会自动换行,而`<textarea>` 的高度可能不随内容自动调整。下面我们将详细探讨如何通过CSS和JavaScript来解决这些问题,让这些元素既能自动换行,又能...

    HTML中的文本框textarea标签

    8. `wrap`: 控制文本溢出时的行为。默认情况下,文本会自动换行,但在数据提交时不会包含换行符。其他选项包括: - `off`: 避免自动换行,超出边界时文本会向左滚动。 - `virtual`: 同默认,但提交时不保留换行符...

    从textarea中获取数据之后按原样显示实现代码

    使用`<textarea>`元素是一个常见的做法,因为它允许用户输入多行文本。当用户提交这些数据后,我们可能需要按照用户输入的原样进行显示,特别是在需要展示代码或者保留文本格式的场景中。以下是实现这一功能的相关...

Global site tag (gtag.js) - Google Analytics