在 HTML 表格中，如何强制单元格文本截断而不增加单元格的宽度或换行答案

【问题标题】：In HTML Table how do you force cell text to truncate and not increase the width of the cell or wrap在 HTML 表格中，如何强制单元格文本截断而不增加单元格的宽度或换行
【发布时间】：2019-01-04 23:30:44
【问题描述】：

我尝试了许多 CSS 样式设置，但似乎无法正常工作，我要么让文本换行，要么增加列的大小。

我已尝试将表格布局设置为固定

table { table-layout:fixed; }

尝试了各种不同的列组合。

Name { width: 100px; overflow:hidden; white-space:nowrap; }

【问题讨论】：

标签： css css-tables

【解决方案1】：

同时在整个表格上设置宽度。宽度可以设置为百分比、像素或其他单位。您可能认为设置每列的宽度或第一行中每个单元格的宽度就足够了，但出于某种奇怪的原因，它没有。

表格的固定布局有许多怪癖和奇怪之处，其中之一是如果内容不适合，列会变宽，除非已设置表格的总宽度。这似乎在浏览器中如此频繁地发生，以至于人们甚至可能认为这是规范的一部分（但据我所知并非如此）。

如果您想为某些列设置固定宽度（需要时截断）而不设置总宽度，恐怕您需要像<td><div>...</div></td> 这样的解决方法，在@ 上设置宽度和溢出属性987654322@元素。

【讨论】：

【解决方案2】：

这就是你要找的吗？

http://jsfiddle.net/PW6Bg/

【讨论】：

【解决方案3】：

您可以将<td> 的宽度设置为固定值。

另外，请做一些研究，这个问题被问过很多次了:)

【讨论】：

如果你这样做，文本不会自动换行吗？
在我的问题的 CSS sn-p 中，我将宽度设置为 100px，
我的错，我读得有点快。如果您想以漂亮的方式截断文本，最好使用javascript。