html - 文本溢出作为省略号不起作用

Question

我有一个从 MySQL 动态填充的表。该表已应用以下 CSS

.table th,
.table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我也有一个定义的宽度:

<td style="width: 100px">Some Stationers &amp; Printers , Yamunanagar</td>

我希望它看起来像 Some Stationers &公关... 我不知道我在这里做错了什么，任何建议将不胜感激!

已经测试过的浏览器是 Safari 和 Chrome，所以只有 webkit!

Answer 1

text-overflow仅适用于 block 元素(又名带有 display: block 的元素)。

您必须将内容包装在 <td> 中让属性生效，像这样:

<td>
  <div style="text-overflow: ellipsis; overflow: hidden">
    Some Stationers &amp; Printers , Yamunanagar
  </div>
</td>

(如果您不能触摸标记，您可以使用 JS 自动执行此操作。)