`
jveqi
  • 浏览: 312832 次
  • 性别: 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 的几种属性简介。

    技术讲座_Div+Css布局

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

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

    wrap Hard or soft 设置文本输入区内的换行模式。 textarea 元素 示例:创建一个rows="10" cols="30"的文本框 总结 02 熟知textarea元素的用法 掌握textarea元素的书写形式并熟练运用 总结 THANKS

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

    textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea> 类似的,可以加入代码到<input>。 2、表单输入

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

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

    HTML中的文本框textarea标签

    <textarea></textarea>用来创建一个可以输入多行的文本框,此标志对用于<form>... (8)wrap属性 定义输入内容大于文本域时显示的方式,可选值如下: *默认值是文本自动换行;当输

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

    HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加 和 等HTML元素来添加换行和打印空格。 pre去掉滚动条 pre显示文本内容时是不会自动换行的,此时可以添加一些CSS来解决: <pre>...

    西路ASP留言本WGB Ver1.1

    wrap=hard>;;;<;;;/textarea>;;; 36为每行输出的字符数. 留言高级搜索 详细的用户资料存储 在线系统设置 留言回复功能 留言删除功能 客户端检测用户输入数据 用户在线修改密码 高级搜索...

    实时翻译系统html5源码

    .wrap .input textarea{z-index:3;height:100%;width:400px;border:0;resize:none;outline:0;color:#333;font-family:'微软雅黑';margin:0;padding:0;line-height:40px;font-size:20px;text-indent:10px;} .wrap...

    UEditor入门基础

    此处采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。 2、提交编辑器内容至后端 ...

    div+css布局中常用方法总结

    1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible" 2、cursor:pointer 使鼠标变成手形 3、word-wrap:break-word;控制是否断词 ......

    微信小程序实现图片选择并预览功能

    其他要点:textarea使用,底部保存按钮固定 (二)、小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照。 (三)、效果图 效果如下:   (四)、代码展示 WXML页面: <view class=...

    jquery,js简单实现类似Angular.js双向绑定

    刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: 名字: <input ng-model=name>...<div class=wrap> <textarea></textarea> <div class=miss></div> $('t

    小程序实现留言板

    textarea class='message1' type='text' placeholder=请选择或者输入捎话(60字以内) maxlength='80' style=word- wrap:break-word onfocus=this.blur() bindtap=''></textarea> 快速捎话:{{neirong}} &lt...

    Ctrl+Enter提交内容信息

    [removed]ie = (document.all)? true:falseif (ie){function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();...textarea cols=95 name=Content rows=12 wrap=v

    插件版公告栏插件 for pjblog.rar

    虽然说公告栏这东西大家很多人都有了,但是一般都是添加模块然后再...注:由于PJBLOG的插件设置里面的textarea不能指定wrap属性,公告内容过长便会自动换行,所以建议大家先在记事本里面把公告信息写好之后再粘贴过来。

    JS实现留言板功能

    每天一个JS 小demo之留言板。主要知识点:DOM方法的....wrap { width: 400px; margin: 30px auto; } textarea { display: block; width: 100%; height: 60px; } input { display: block; width: 60%; margin: 15px auto

    JavaScript常用验证函数实例汇总

    本文实例汇总了JavaScript常用验证函数。分享给大家供大家参考。具体汇总如下: 一、字符串类验证 1. 长度限制 代码如下:[removed] ...textarea name=”b” cols=”40″ wrap=”VIRTUAL” rows=”6″></textare

    超漂亮的仿腾讯弹出层效果(兼容主流浏览器)

    word-wrap: break-word; line-height:1.5;} body,input,textarea,select,button { margin: 0; font-size: 12px; font-family: Tahoma, SimSun, sans-serif;} div,p,table,th,td { font-size:1em; font-family:...

    dragsort:拖动排序插件

    拖曳排序 预先排序插件 使用方法 -- function makeDrag() { window.picDragSort = new Drag({ ... cancel: 'textarea,input' }); } if (pc.getElems('#J-imgupload-list .imgupload-wrap').length) { makeDrag(); }

Global site tag (gtag.js) - Google Analytics