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

Question

考虑下面的例子：（点击此处查看演示）

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

输出结果为：宽度 = 139，省略号不会出现。

我错过了什么？

- Misha Moroshko

---

可能是CSS文本溢出在表格单元格中？的重复问题。 - BoltClock

不知道為什麼會出現重複的問題，但答案並沒有提供解決方法（就像Arlen Cuss所做的那樣）。 - Florian Margaine

иЎЁж јеҚ•е…ғж јдёӯзҡ„widthе’Ңheightе§Ӣз»Ҳиў«з”ЁдҪңжңҖе°Ҹе®ҪеәҰе’Ңй«ҳеәҰгҖӮиЎЁж јеҚ•е…ғж јжҳҜдёҚеҗҢзҡ„пјҒ - Mr Lister

@FlorianMargaine 实际上，另一个问题提供了一种解决方法：在单元格中放置一个具有所需宽度的 div。 - Mr Lister

然而，我仍然更喜欢此页面上列出的答案。 - Florian Margaine

为使text-overflow: ellipsis正常工作，需要满足以下要求：https://dev59.com/1FwY5IYBdhLWcg3wEEN2#33061059 - Michael Benjamin

Answer 1

显然，添加以下代码：

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

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

---

同样可以解决该问题。

- Misha Moroshko

---

没问题。具有“display: table-cell”属性的元素（td元素的默认属性）不支持设置宽度。 - Michael Mior

display: block; 这种用法有点违背使用表格的初衷。我喜欢 table-layout: fixed; 这个选项，它对我很有效。 - Alex K

table-layout:fixed 以一种不太智能的方式分配列的宽度。是否有另一个选项可以像 table-layout:normal 一样分配列宽，同时正确显示省略号？ - nest

这会影响表格边框；使用max-width则不会。 - Charlie

Answer 2

同样重要的是放置

table-layout:fixed;

将其放置在包含表格上，这样它在IE9中运行良好（如果您使用了max-width）。

- streetlight

---

这还可以确保在响应式布局中文本溢出的正常工作。 - jao

正是我所需要的。我的表格宽度为100%，除了一个具有固定宽度的列以外，其他所有列都是如此。这使得最后一列可以占用剩余的所有空间。 - matthew_360

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

- marcosbdm

---

这是我见过的最简单的方法，而且它在IE8中实际上可以工作。 - Keith Ketterer

这实际上是我在表格省略中见过的最佳解决方案。 - membersound

我不太清楚这有什么不同，因为它强制定义了宽度。它仍然完全禁用表格列的自动调整大小功能，这意味着现在您必须在整个应用程序的每一列上进行像素微调。对于大型应用程序来说，这是一场噩梦。 - Dave Munger

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

- Asherah

---

看得真仔细。最好是两者都使用，这样元素就是固定宽度的。否则，如果内容允许的话，它可能会更短。 - LSerni

比显示hack好得多；显示hack会破坏表格边框。 - Charlie

Answer 5

演示页面

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

真正的技巧是在vw 单位上设置 max-width（在 <th> 上）。

这将有效地导致元素的宽度与视口宽度（浏览器窗口）"绑定"，并会导致响应式内容剪切。将 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>

- vsync

---

不确定这个“vw”单位是如何工作的，但结果非常完美，因为使用这种方法表格可以保持自动调整列宽的正常状态。 - andreszs

Answer 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 中使用，要清除浮动效果，请参见：http://css-tricks.com/snippets/css/clear-fix/），并且还有省略号：

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

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

然后，您需要设置您的span元素的max-widths属性，这样就可以使列表看起来像是一个表格。

- diggersworld

---

你能在 td 标签内使用 ul 标签吗？（例如 <td><ul>...</ul></td>）这对我来说似乎不起作用 :( - Sam

Answer 7

我发现，与其使用省略号来解决文本溢出的问题，不如使用禁用并设置样式的输入框，这样看起来更好，并且仍然允许用户在需要时查看和选择整个字符串。

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

看起来像文本框，但可以突出显示，更加用户友好。

- craigsnyders

---

它不够用户友好，因为使用辅助技术时会被误读为输入，因此用户认为他可以输入某些内容。滥用元素的语义是不可取的。 - Carlo

哇，这太聪明了！由于它是表格的一部分，只需将输入设置为无边框且背景透明即可。我喜欢这个解决方案！ - Sam

Answer 8

检查您的元素的box-sizing CSS属性。我遇到了CSS模板的问题，它将其设置为border-box值。您需要设置box-sizing: content-box。

- David Slavík

Answer 9

我已经尝试了上述许多解决方案，但它们都不够灵活或令人满意。

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

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

- J.Kirk.

---

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

Answer 10

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

上面的设置对我有效，而不需要改变表格宽度。我在内部添加了一个 div，并给它添加了 ellipsis 类。

- Gowtham Sankaran