html换行符到表格中无效,css表格内文字不换行符介绍

当一行文字超过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 中的

 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！