当一行文字超过 DIV 或者 Table 的宽度的时候, 浏览器中默认是让它换行显示的, 如果不想让他换行要怎么办呢?
下面我们来看一下在表格中设置文字不换行的方法:
- 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 会有 "...", 其它的浏览器文本超出指定宽度时会隐藏.
使用的属性介绍:
Word-break 属性规定自动换行的处理方法.
语法:
Word-break: normal|break-all|keep-all;
属性值:
normal 使用浏览器默认的换行规则.
break-all 允许在单词内换行.
keep-all 只能在半角空格或连字符处换行.
white-space 属性规定段落中的文本不进行换行:
属性值:
normal 默认. 空白会被浏览器忽略.
pre 空白会被浏览器保留. 其行为方式类似 html 中的 <pre> 标签.
nowrap 文本不会换行, 文本会在在同一行上继续, 直到遇到 <br> 标签为止.
pre-wrap 保留空白符序列, 但是正常地进行换行.
pre-line 合并空白符序列, 但是保留换行符.
inherit 规定应该从父元素继承 white-space 属性的值.
来源: http://www.css88.com/qa/css3/16300.html