表格单元格中的CSS文本溢出？

我想在表格单元格中使用CSS

text overflow

，这样，如果文本太长而不能放在一行中，它将使用省略号剪裁，而不是换行。这可能吗

我试过这个：

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

但是

空白：nowrap

似乎使文本（及其单元格）不断向右扩展，使表格的总宽度超出其容器的宽度。但是，如果没有它，文本在到达单元格边缘时会继续换行。

为什么会发生这种情况？

这似乎表明文本溢出仅适用于块元素：

11.1。溢出省略号：“文本溢出”属性
文本溢出剪辑|省略号|
首字母：clip
适用于：块容器如果指定
表布局：固定表
元素上的code>，则您的
td
样式应生效。不过，这也会影响单元格的大小

Sitepoint在此处稍微讨论了表格布局方法：
要在文本溢出表格单元格时使用省略号剪裁文本，您需要在每个
td
类上设置
max width
CSS属性，以便溢出生效。不需要额外的布局
div
元素：

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

对于响应性布局；使用
max width
CSS属性指定列的有效最小宽度，或者只使用
max width:0提供无限的灵活性。此外，包含表格需要特定的宽度，通常
width:100%，列的宽度通常设置为总宽度的百分比

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

历史记录：对于IE9（或更低版本），您需要在HTML中包含此内容，以修复特定于IE的呈现问题

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

这是在IE 9中工作的版本



第一排。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
右上角的单元格。
第二行-Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
右下角单元格。
指定
最大宽度
或固定宽度并不适用于所有情况，表格应该是流动的，并自动调整单元格间距。这就是桌子的用途。适用于IE9和其他浏览器

使用以下命令：


表格{
宽度：100%；
}
.首先{
宽度：50%；
}
.省略号{
位置：相对位置；
}
.省略号：之前{
内容：''；
可见性：隐藏；
}
.省略号范围{
位置：绝对位置；
左：0；
右：0；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

标题1
标题2
标题3
标题4
此文本溢出，其单元格太大。
此文本溢出，其单元格太大。
此文本溢出，其单元格太大。
此文本溢出，其单元格太大。
以防您不想将固定宽度设置为任何值
下面的解决方案允许您拥有较长的表单元格内容，但不得影响父表的宽度或父行的高度。例如，您希望有一个宽度为100%的表，该表仍将自动调整大小功能应用于所有其他单元格。在带有“注释”或“注释”列或其他内容的数据网格中很有用


将以下3条规则添加到CSS中：

。文本溢出动态容器{
位置：相对位置；
最大宽度：100%；
填充：0！重要；
显示：-webkit flex；
显示：-moz flex；
显示器：flex；
垂直对齐：文本底部！重要；
}
.文本溢出动态省略号{
位置：绝对位置；
空白：nowrap；
溢出y：可见；
溢出x：隐藏；
文本溢出：省略号；
-ms文本溢出：省略号；
-o-text-overflow：省略号；
最大宽度：100%；
最小宽度：0；
宽度：100%；
排名：0；
左：0；
}
.文本溢出动态容器：之后，
.文本溢出动态省略号：后{
内容:'一';；
显示：内联；
可见性：隐藏；
宽度：0；
}

在任何需要动态文本溢出的表格单元格中按如下方式设置HTML格式：


//…你的长文本在这里。。。

另外，将所需的
最小宽度
（或完全不）应用于表格单元格

当然，小提琴：
当它是表格宽度百分比时，或者您不能在表格单元格上设置固定宽度。您可以应用
表格布局：固定以使其正常工作<
<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

table {
    width: 100%;
    table-layout: fixed;
}

td {
   text-overflow: ellipsis;
   white-space: nowrap;
}