CSS 溢出 html <td>

Question

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

有没有办法让 overflow 与 <td> 元素一起工作，或者我是否需要将 <div> 元素放入我的 td 中以使它们与 overflow 一起工作？

here 是一个 JSfiddle，显示 tables 在元素周围或内部有和没有划分，提供所需的行为，以及 table 没有划分显示我在说什么.

Answer 1

您是否尝试过将所有 <td> 元素包含在一个 div 中？

<div>
    <td></td>
    <td></td>
</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

如上所述

table { table-layout: fixed; }

应该可以解决问题，但我想如果您不希望 table 元素换行，它不适合您。

我仔细阅读了 resize 并注意到它们不太适合 table tables:

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

但是，当使用 fixed table-layout 时，这个问题似乎得到了解决。

我能为您找到的最接近的解决方案是：

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

然而问题在于：

resize 不起作用，除非我如上所述应用固定的 table 布局。
我不得不为单元格使用 max-width，这样它们就不会太长。

我想说我在这里的回答并不是你问题的最终答案，但一些研究表明你当前的解决方案似乎效果最好，除非你使用像固定 table 布局这样的变通方法但是您随后会处理自动单元格宽度（另一组与您的 "working" div 布局不匹配的问题）。

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

CSS 溢出 html <td>

CSS overflow with html <td>

html

css

overflow

css-tables