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

Question

请考虑以下示例:( 此处为现场演示)

HTML:

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

CSS:

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

JS:

<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,并且不显示省略号.

我在这里错过了什么？

Answer 1

显然,添加:

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

也解决了这个问题.

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

Answer 2

这也很重要

table-layout:fixed;

在包含的表上,所以它在IE9中运行良好(如果你的利用最大宽度).

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

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.

Answer 5

演示页面

对于具有动态宽度的表格,我找到了以下方法来产生令人满意的结果.每个<th>希望具有修剪文本能力的应该具有内包裹元素,其包裹<th>允许text-overflow工作的内容.

然后,真正的诀窍是以单位设置max-width(在<th>)上vw.

这将有效地使元素的宽度"绑定"到视口宽度(浏览器窗口),并将导致响应内容剪辑.将vw单位设置为所需的令人满意的值.

最小的CSS:

th{ max-width:10vw; }

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

这是一个可运行的演示:

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>