css中关于换行的几个名词解释
时间:2011-08-19
来源:互联网
IE定义了多个换行处理属性:line-break,word-break,word-wrap,另外css1定义了White-space,css3增加了word-wrap
下面就来解释一下这个属性的定义:
line-break:专门负责控制日文换行,国内的设计师接触的比较少
word-break:这个属性主要针对亚洲语言和非亚洲语言进行控制换行.当属性取值break-all时,可以允许非亚洲语言文本行的任意字内断开;当属性取值keep-all时,表示在中文,韩文,日文中是不允许字断开的
word-wrap:这个属性可以控制换行.当属性取值break-word时,将强制换行,中文文本没有任何问题,英文语句也没有问题.但是对于长串的英文就不起作用,也就是说,word-wrap:break-word是控制是否断词,而不是断字符;取值为normal时表示控制连续文本换行
White-space:具有格式化文本的作用,当属性取值为nowrap时,表示强制在同一行内显示所有文本,当属性取值为pre时,表示显示预定义文本格式
css3中的word-wrap属性尚未被广泛支持,支持的浏览器有IE6,7,8,9,Firefox3.5,opera10.5,Safari3.0,Safari4.0,chrome
应用:
1.防止表格的标题行换行
将表格的标题行用th表示,对th定义css如下
th{word-break:keep-all;/*禁止词断开显示*/
word-warp:normal;/*允许内容顶开指定的容器边界,如果声明了word-wrap:break-word则会在IE浏览器中出现换行显示,会破坏整个标题行的样式*/
white-space:nowrap;/*强迫在一行内显示*/}
在ie6,7,8,ff,chrome,opera,Safari,遨游浏览器下测试都没问题
2.超过宽度的文字显示未省略号,对文本层应用wrap类,则wrap的css设置如下:
.wrap{white-space:nowrap;overflow:hidden;-o-text-ellipsis:ellipsis;/*兼容opera浏览器*/text-ellipsis:ellipsis;}
这个设置ff下不能显示为省略号,但是超过宽度会隐藏,不会破坏布局
下面就来解释一下这个属性的定义:
line-break:专门负责控制日文换行,国内的设计师接触的比较少
word-break:这个属性主要针对亚洲语言和非亚洲语言进行控制换行.当属性取值break-all时,可以允许非亚洲语言文本行的任意字内断开;当属性取值keep-all时,表示在中文,韩文,日文中是不允许字断开的
word-wrap:这个属性可以控制换行.当属性取值break-word时,将强制换行,中文文本没有任何问题,英文语句也没有问题.但是对于长串的英文就不起作用,也就是说,word-wrap:break-word是控制是否断词,而不是断字符;取值为normal时表示控制连续文本换行
White-space:具有格式化文本的作用,当属性取值为nowrap时,表示强制在同一行内显示所有文本,当属性取值为pre时,表示显示预定义文本格式
css3中的word-wrap属性尚未被广泛支持,支持的浏览器有IE6,7,8,9,Firefox3.5,opera10.5,Safari3.0,Safari4.0,chrome
应用:
1.防止表格的标题行换行
将表格的标题行用th表示,对th定义css如下
th{word-break:keep-all;/*禁止词断开显示*/
word-warp:normal;/*允许内容顶开指定的容器边界,如果声明了word-wrap:break-word则会在IE浏览器中出现换行显示,会破坏整个标题行的样式*/
white-space:nowrap;/*强迫在一行内显示*/}
在ie6,7,8,ff,chrome,opera,Safari,遨游浏览器下测试都没问题
2.超过宽度的文字显示未省略号,对文本层应用wrap类,则wrap的css设置如下:
.wrap{white-space:nowrap;overflow:hidden;-o-text-ellipsis:ellipsis;/*兼容opera浏览器*/text-ellipsis:ellipsis;}
这个设置ff下不能显示为省略号,但是超过宽度会隐藏,不会破坏布局
作者: lihuiluhuijie 发布时间: 2011-08-19
楼主使用nowrap="nowrap"试试,怎么样!
[ 本帖最后由 zhengmingming 于 2011-8-19 15:26 编辑 ]
[ 本帖最后由 zhengmingming 于 2011-8-19 15:26 编辑 ]
作者: zhengmingming 发布时间: 2011-08-19
楼主使用nowrap="nowrap"试试,怎么样!
[ 本帖最后由 zhengmingming 于 2011-8-19 15:25 编辑 ]
[ 本帖最后由 zhengmingming 于 2011-8-19 15:25 编辑 ]
作者: zhengmingming 发布时间: 2011-08-19
<th nowrap="nowrap"></th>这样在不同浏览器中都能够很好的单行显示,但是如果th定义了宽度,这个属性就不再起作用了
作者: lihuiluhuijie 发布时间: 2011-08-19
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28