【20161008】【CSS】Table td 不换行 超出省略号

[zhongxia245]

问题

常规的给td 设置样式

table td{
  overflow:hidden;
  text-overflow:ellipsis;
}

表格该换行还是继续换行， 该占多大宽度还是占多大。 这个很坑爹，为什么不起作用呢？

CSS控制文字超出则显示 ...

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行。
一般的文字截断（适用于内联与块）：

.text-overflow {
    display:block;/*内联对象需加*/
    width:31em;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

Table td 强制不换行，超出 则 显示 ...

对于表格文字溢出的定义：
对于表格超出范围显示省略号

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;一起使用。*/
}

table-layout

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

效果

需要你注意的是，这个CSS样式只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，

其它的浏览器文本超出指定宽度时会隐藏。

以上问题可以解决

• 使用CSS如何控制文本换行？
• 使用CSS如何控制文本不换行？
• 使用CSS如何控制文本超出范围后显示省略号？
• 使用CSS如何控制文本超出范围后隐藏？
• Table td 如何强制不换行？