html - HTML/CSS：缩小单元格及其内容

Question

我有一张桌子，其中一排特别宽。

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td>bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

我喜欢通过 td 的 CSS 剪切长单元格的内容。我不想删减内容。

设置所需单元格的最大宽度会缩小单元格，但不会缩小内容。所以内容与单元格重叠。

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td style="max-width: 30px;">bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

我想要一个缩小的单元格并且没有重叠（也没有自动换行）。

知道怎么做吗？

标签： htmlcsshtml-table

Answer 1

根据您想要达到的结果，您可以使用

text-overflow: ellipsis;

或者

text-overflow: clip;

这样内容就不会与单元格重叠。

更多信息： https ://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow