用CSS让文字在一行内显示不换行的方法:
一般的文字截断(适用于内联与块):
.text-overflow{
display:block /*内联对象需加*/
width:31em
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /*溢出时显示省略标记...;需与overflow:hidden一起使用*/
}
对于表格,定义有点不一样:
table{
width:30em
table-layout:fixed /*只有定义了表格的布局算法为fixed,下面td的定义才能起作用*/
}
td{
width:100%
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /* 溢出时显示省略标记...;需与overflow:hidden一起使用*/
}
注:这个只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
一、使用writing-mode属性语法:writing-mode:lr-tb或writing-mode:tb-rl参数:1、lr-tb:从左向右,从上往下2、tb-rl:从上往下,从右向左运行代码发现,ie显示正常,火狐却不行,所以不建议使用writing-mode属性,下面使用模拟方法实现。 二、模拟文字竖排代码:ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}此方法让li右浮动,设置li宽度和字宽度一样都是14px,这样就自动换行了。另外,“word-wrap:break-wordword-break:nomal”这句实现标点自动换行(连续字符自动换行)。大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是CSS如何将他们换行的方法!
对于div
1.(IE浏览器)white-space:normal
word-break:break-all这里前者是遵循标准。
#wrap{white-space:normal
width:200px
}
或者
#wrap{word-break:break-allwidth:200px}
ddd1111111111111111111111111111111111
效果:可以实现换行
2.(Firefox浏览器)white-space:normal
word-break:break-alloverflow:hidden同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal
width:200px
overflow:auto}
或者
#wrap{word-break:break-allwidth:200px
overflow:auto
}
ddd1111111111111111111111111111111111111111
效果:容器正常,内容隐藏
对于table
1.
(IE浏览器)使用样式table-layout:fixed;
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
效果:可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
.tb
{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
效果:可以换行
3.
(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
abcdefghigklmnopqrstuvwxyz
1234567890
效果:两个td均正常换行
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
.tb
{table-layout:fixed}
.td
{overflow:hidden}
abcdefghigklmnopqrstuvwxyz
1234567890
abcdefghigklmnopqrstuvwxyz
1234567890
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)