CSS溢出html

Question

我正在创建一个可以包含长字符串的单元格的表。为了使事情适合，我试图使用overflow:hidden和overflow-text:ellipse样式隐藏长文本。起初我以为我做错了什么，但现在我注意到没有任何溢出功能适用于任何表元素，但是与<div>元素一样正常工作。我通过在每个单元格中放置一个<div>来解决这个问题，但这很尴尬......

有没有办法让溢出与<td>元素一起使用，或者我是否需要在我的td中添加<div>元素才能让它们与溢出一起使用？

here 是一个JSfiddle，显示有和没有分割的表格，或者在给出所需行为的元素内，以及没有显示我正在讨论的内容的表格。

Answer 1

如上所述

table { table-layout: fixed; }

应该解决问题，但我想如果你不想让表格元素换行，它就不适合你。

我在resize上读到并注意到它们不适合表格：

https://www.w3schools.com/cssref/css3_pr_resize.asp

但是，当使用fixed表格布局时，此问题似乎已得到解决。

我能找到最适合你的解决方案是：

https://jsfiddle.net/yc076du3/64/

然而问题是：

1. 除非我按照上述说明应用固定的表格布局，否则resize不起作用。

2. 我必须使用单元格的最大宽度，这样它们就不会太长。

我会说我的回答并不是你问题的最终答案，但有些研究表明你当前的解决方案看起来效果最好，除非你使用固定表格布局之类的解决方法但是你会自动处理单元格宽度（另一组与“工作”div布局不匹配的问题）。

我希望这会有所帮助。如果您找到更好的解决方案，请分享。

Answer 2

为您 https://jsfiddle.net/yc076du3/22/

table{
   table-layout: fixed;
}

如果你试着理解它是如何工作的......

请阅读：https://www.w3.org/TR/css-tables-3/#table-layout-algorithm

并且：https://www.w3.org/TR/css-tables-3/#style-overrides

Answer 3

您是否尝试将所有<td>个元素括在一个div？

中

<div>
    <td></td>
    <td></td>
</div>

也许这适合你。