CSS强制性换行
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不 换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应 该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。
解决方法(以IE,chrome,FF为测试浏览器):
{
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
}
以下是对这两种方法的区别说明:
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)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。
建
议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持
word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格
不能用 来代替,不然不能正确换行。
文章来自:http://www.cnblogs.com/mofish/archive/2011/02/16/1956263.html
CSS强制性换行的更多相关文章
- CSS强制性换行word-break与word-wrap的使用
一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字 ...
- 说说最易被忽略的CSS强制性换行
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字 ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- CSS 段落/换行/缩进
CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...
- CSS属性之word-break:break-all强制性换行
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空 ...
- css文本换行相关属性及解释
本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...
- css 强制换行
强制不换行 div{white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{wor ...
- CSS单词换行and断词
背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定. 1 2 word–break: keep–all; wo ...
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
随机推荐
- jQuery ClockPicker 圆形时钟
ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线. 在线实例 实例预览 jQuery ClockPicker 圆形时钟 使用方法 <div class=&qu ...
- CSS3——3D旋转图(跑马灯效果图)
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
- iOS 封装添加按钮的方法
添加按钮 #pragma mark 添加按钮 - (void)addButtonWithImage:(NSString *)image highImage:(NSString *)highImage ...
- Mac Security工具使用总结
Security是Mac系统中钥匙串和安全模块的命令行管理工具,(图形化工具为Keychain Access.app).钥匙串(Keychain)实质上就是一个用于存放证书.密钥.密码等安全认证实体的 ...
- React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
- AFN3.0封装
总结了一下AFN3.0封装,也借鉴了其他人总结的,整理如下,希望多交流,互相进步 // // XJYSessionManager.h// // Created by XJY on 16/10/17. ...
- 常用API——字符串String型函数
上图: 声明 var myString = new String(“Every good boy does fine.”); var myString = “Every good boy does f ...
- 不能在DropDownList 中选择多个项
在绑定DropDownList时如果出现多次绑定,会出错以下错误: “不能在DropDownList 中选择多个项” 经了解,只需要在选中值是清空选择即可:xxDropDownList.ClearSe ...
- Oracle 释放flash recovery area的四种方法
早上收到一台Linux服务器磁盘告警邮件以及监控告警日志程序发来的邮件.检查过后,发现Linux服务器中一个分区没有空间了.主要原因是由于昨晚程序员做升级时,产生了大量的归档日志,导致联机重做日志无法 ...
- hive 内部表和外部表的区别和理解
1. 内部表 create table test (name string , age string) location '/input/table_data'; 注:hive默认创建的是内部表 此时 ...