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

指定 max-width 或固定宽度并不适用于所有情况，并且表格应该是流动的并自动间隔其单元格。这就是桌子的用途。适用于 IE9 和其他浏览器。

使用这个：http://jsfiddle.net/maruxa1j/

表{宽度：100%； } .first { 宽度：50%; } .ellipsis { 位置：相对； } .ellipsis:before { 内容：' ';可见性：隐藏； } .ellipsis span { 位置：绝对；左：0；右：0；空白：nowrap；溢出：隐藏；文本溢出：省略号； }

span>

表头 1	表头 2	表头 3	表头 4
这个文本溢出并且对于它的单元格来说太大了。	此文本溢出，对其单元格而言太大。	此文本溢出，对其单元格而言太大。	这个文本溢出并且对于它的单元格来说太大了。

---

为什么会这样？

似乎 this section on w3.org 表明 text-overflow 仅适用于块元素：

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDN says the same。

此 jsfiddle 包含您的代码（进行了一些调试修改），如果将其应用于 div 而不是 td，则可以正常工作。它还有我能很快想到的唯一解决方法，将 td 的内容包装在包含 div 的块中。但是，这对我来说看起来像是“丑陋”的标记，所以我希望其他人有更好的解决方案。测试它的代码如下所示：

td，div {溢出：隐藏；文本溢出：省略号；空白：nowrap；边框：1px 纯红色；宽度：80px；工作，但没有表了：

有效，但需要非语义标记：

Lorem ipsum 和点心是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊。

---

如果您不想将固定宽度设置为任何东西

下面的解决方案允许您拥有较长的表格单元格内容，但不得影响父表格的宽度，也不影响父行的高度。例如，您希望有一个带有 width:100% 的表格，该表格仍将自动调整大小功能应用于所有其他单元格。在带有“Notes”或“Comment”列或其他内容的数据网格中很有用。

https://i.stack.imgur.com/XxT6g.png

将这 3 条规则添加到您的 CSS 中：

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

在您希望动态文本溢出的任何表格单元格中像这样格式化 HTML：

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

此外，将所需的 min-width（或根本不应用）应用于表格单元格。

当然是小提琴：https://jsfiddle.net/9wycg99v/23/

---

如果您只想让表格自动布局

不使用使用 max-width、百分比列宽或 table-layout: fixed 等。

https://jsfiddle.net/tturadqq/

这个怎么运作：

第 1 步：让表格自动布局发挥作用。

当有一列或多列包含大量文本时，它会尽可能缩小其他列，然后将长列的文本换行：

https://i.stack.imgur.com/ZjYtj.png

第 2 步：将单元格内容包装在一个 div 中，然后将该 div 设置为 max-height: 1.1em

（额外的 0.1em 用于呈现略低于文本基础的字符，例如 'g' 和 'y' 的尾部）

https://i.stack.imgur.com/K12JV.png

第 3 步：在 div 上设置 title

这有利于可访问性，并且对于我们稍后将使用的小技巧是必要的。

https://i.stack.imgur.com/88o6j.png

第 4 步：在 div 上添加 CSS ::after

这是棘手的一点。我们使用 content: attr(title) 设置 CSS ::after，然后将其放置在 div 顶部并设置 text-overflow: ellipsis。为了清楚起见，我在这里将其涂成红色。

（注意长列现在有一个拖尾省略号）

https://i.stack.imgur.com/c9jkw.png

第 5 步：将 div 文本的颜色设置为 transparent

我们完成了！

https://i.stack.imgur.com/Flajt.png

---

似乎如果您在 table 元素上指定 table-layout: fixed;，那么您的 td 样式应该会生效。不过，这也会影响单元格的大小。

Sitepoint 在这里稍微讨论了表格布局方法：http://reference.sitepoint.com/css/tableformatting

---

当它是百分比表格宽度时，或者您不能在表格单元格上设置固定宽度。您可以应用 table-layout: fixed; 使其工作。

表{表布局：固定；宽度：100%； } td { 文本溢出：省略号；空白：nowrap；溢出：隐藏；边框：1px 纯红色； }

Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊。

Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。 Lorem ipsum 和点心是啊是啊是啊。

---

将单元格内容包装在 flex 块中。作为奖励，单元格自动适合可见宽度。

表{宽度：100%； } div.parent { 显示：弹性； } div.child { 弹性：1；宽度：1px；溢出-x：隐藏；文本溢出：省略号； }

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

---

我使用单元格内的绝对定位 div（相对）解决了这个问题。

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

而已。然后你可以添加一个 top: 值到 div 或垂直居中：

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;
}

---

在我的情况下，这在 Firefox 和 Chrome 中都有效：

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

---

对于带有省略号的干净的自动大小表

如果您可以放弃表格标签，那么现代 CSS 有一个更简洁 (IMO) 的解决方案可用：使用 grid 布局。

您只需要一个 div 或类似的来表示表格，其中包含单元格，例如：

<div class="table">
  <div class="cell">
  <div class="cell">
  <div class="cell">
  <div class="cell">
</div>

现在，如果我希望这是一个 2x2 表，那么只需为网格定义两个自动调整大小的列：

table {
  display: grid;
  grid-template-columns: auto auto;
}

对于单元格，您只需要多几行 CSS：

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

任务完成！如果您需要确保某些列比其他列宽，那么使用列模板的 fr 单位或其他可用选项效果很好。

---

XML

<td><div>Your overflowing content here.</div></td>

CSS

td div
{
 max-height: 30vh;
 overflow: auto;
}

为了这个非常具体的目的而试图弄乱整个 table 是没有意义的。是的，如果您明确地努力避免成为另一个嵌套 600 个 div 的 Twitter/Facebook“开发人员”，有时添加一个额外的元素是可以的。

---

这是适用于 IE 9 的版本。

http://jsfiddle.net/s27gf2n8/

<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>

---