为什么 CSS 省略号在表格单元格中不起作用？答案

【问题标题】：Why doesn't CSS ellipsis work in table cell?为什么 CSS 省略号在表格单元格中不起作用？
【发布时间】：2012-05-09 11:38:10
【问题描述】：

考虑以下示例：(live demo here)

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

输出为：width = 139，省略号没有出现。

我在这里错过了什么？

【问题讨论】：

CSS text-overflow in a table cell?的可能重复
不知何故重复，但答案没有提供解决方法（就像 Arlen Cuss 所做的那样）。
width 和 height 在表格单元格上始终用作最小宽度和高度。表格单元格不同！
@FlorianMargaine 实际上，另一个问题确实提供了一种解决方法：在单元格中放置一个具有所需宽度的 div。
不过，我仍然更喜欢此页面上列出的答案。

标签： html css ellipsis

【解决方案1】：

显然，添加：

td {
  display: block; /* or inline-block */
}

也解决了问题。

另一种可能的解决方案是为表设置table-layout: fixed;，并将其设置为width。例如：http://jsfiddle.net/fd3Zx/5/

【讨论】：

没错。带有display: table-cell（td 元素的默认值）的元素不接受宽度。
display: block; 有点违背了使用表格的目的。我喜欢table-layout: fixed; 选项，它对我很有效。
table-layout:fixed 以不那么聪明的方式分配列的宽度。是否有另一个选项可以以相同的方式分配列宽 table-layout: normal 并正确显示省略号？
这个螺丝与表格边框；使用 max-width 不会。

【解决方案2】：

放也很重要

table-layout:fixed;

在包含表上，因此它在 IE9 中也能正常运行（如果您使用最大宽度）。

【讨论】：

这也将确保文本溢出在响应式布局中起作用
这正是我所需要的。我有 100% 的表格宽度。以及除具有固定宽度的列之外的所有列。这允许最后一列占用剩余的空间。

【解决方案3】：

如前所述，您可以使用td { display: block; }，但这违背了使用表格的目的。

您可以使用table { table-layout: fixed; }，但也许您希望它对某些列有不同的表现。

因此，实现您想要的最佳方式是将您的文本包装在 <div> 中，并将您的 CSS 应用到 <div>（而不是 <td>），如下所示：

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

【讨论】：

这是我见过的最简单的方法，它实际上在 IE8 中有效。
这实际上是我在表格中看到的关于省略号的最佳解决方案。
我不清楚这有什么不同，因为它强制定义宽度。它仍然完全禁用表列自动调整大小，这意味着您现在必须在整个应用程序的每一列上调整像素。对于大型应用来说，这是一场噩梦。

【解决方案4】：

尝试使用max-width而不是width，表格仍然会自动计算宽度。

即使在ie11 下也能工作（使用 ie8 兼容模式）。

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle.

【讨论】：

很好看。最好使用both，这样元素的宽度是固定的。否则，如果内容允许，它可能会更短。
比显示黑客好得多；带有表格边框的 displayhack 螺丝。

【解决方案5】：

Demo page

对于动态宽度的表格，我发现以下方法可以产生令人满意的结果。每个希望具有修剪文本功能的<th> 都应该有一个内部包装元素，该元素包装<th> 的内容允许text-overflow 工作。

真正的诀窍是将max-width（在<th>上）设置为vw单位。

这将有效地将元素的宽度“绑定”到视口宽度（浏览器窗口），并导致响应式内容剪辑。将vw 单位设置为所需的令人满意的值。

最少的 CSS：

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

演示（带有可编辑文本）：

document.designMode="on"

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案6】：

只是提供一个替代方案，因为我遇到了这个问题，而这里的其他答案都没有达到我想要的效果。所以我使用了一个列表。现在从语义上讲，我输出的信息既可以被视为表格数据，也可以被视为列出的数据。

所以最后我做的是：

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

所以基本上ul 是table，li 是tr，span 是td。

然后在 CSS 中，我将 span 元素设置为 display:block; 和 float:left;（我更喜欢这种组合而不是 inline-block，因为它适用于旧版本的 IE，要清除浮动效果，请参阅：@ 987654321@) 并且还有省略号：

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

然后你所做的就是设置你的跨度的max-widths，这将使列表看起来像一个表格。

【讨论】：

你能在 td 中应用 ul（例如<td><ul>...</ul></td>）吗？它似乎对我不起作用:(

【解决方案7】：

我发现没有使用省略号来解决文本溢出问题，而是禁用和样式化的输入看起来更好，并且仍然允许用户在需要时查看和选择整个字符串。

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

它看起来像一个文本字段，但可以突出显示，因此更加用户友好

【讨论】：

它对用户不友好，因为使用辅助技术这会被误读为输入，因此用户认为他可以输入一些东西。滥用元素的语义是完全不行的。
天啊，这太聪明了！因为它是表格的一部分，只需将输入设置为透明背景的无边框即可。我喜欢这个解决方案！

【解决方案8】：

检查td 元素的box-sizing css 属性。我对将其设置为 border-box 值的 css 模板有疑问。你需要设置box-sizing: content-box。

【讨论】：

【解决方案9】：

我已经尝试了许多上述解决方案，但没有一个感觉灵活或令人满意。

这个 max-width: 1px 的小技巧可以直接应用于 td 元素

.truncated-cell {
   max-width: 1px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

【讨论】：

这似乎与将表格设置为固定宽度完全相同，即它强制所有列的宽度相等，而不是提供表格自动宽度功能的好处。这让我们不得不在应用程序中手动设置每个表的宽度，这既繁琐又容易出错。

【解决方案10】：

让您的桌子保持原样。只需使用应用了截断 CSS 的 span 将内容包装在 TD 内即可。

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

【讨论】：

我试过了，它在 DataTables.net 上不起作用。有什么想法吗？
这与固定宽度解决方案基本相同，因为它禁用了列的动态自动调整大小。

【解决方案11】：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

上述设置对我有用，无需更改表格宽度。我在里面添加了一个 div 并在其中添加了类省略号。

【讨论】：

【解决方案12】：

如果您不想将 max-width 设置为 td（如在this answer 中），您可以将 max-width 设置为 div：

function so_hack(){}

function so_hack(){}http://jsfiddle.net/fd3Zx/754/function so_hack(){}

function so_hack(){}

注意：100% 不起作用，但 99% 可以在 FF 中发挥作用。其他现代浏览器不需要愚蠢的 div hack。

td { 边框：1px纯黑色；填充左：5px；填充右：5px； } td>div{ 最大宽度：99%；溢出：隐藏；文本溢出：省略号；空白：nowrap； }

【讨论】：