HTML 溢出不适用于 TD，溢出概念适用于 TR

Question

<table style="table-layout:fixed;">    
    <tr>
        <td width="221" style="overflow:hidden">
            //A very long text that meant to overflow
        </td>
    </tr>
</table>

经过一些研究，上面的代码应该可以正常工作，但事实并非如此。只有在td中有一个带有样式overflow:hidden的额外div标签时才能实现。

另一个问题是如何实现溢出到高度？如果可以提供任何示例代码，将不胜感激。

Answer 1

您应该为对象指定更多详细信息，例如空格，因为 ling 文本会自动换行在 td 中。

<table style="table-layout:fixed;">    
<tr>
    <td width="221" style="overflow:hidden;display:block;width:5em;white-space:nowrap;background-color:#ccc;">
        //A very long text that meant to overflow
    </td>
</tr>

Answer 2

将

white-space: nowrap;添加到TD应该可以解决它。

演示：http://jsfiddle.net/cYAMm/

Answer 3

要控制 hight，只有你必须使用 CSS 属性 overflow-y 代替 overflow 。要应用滚动，您必须使用overflow-y: scroll，并且与其他此类情况的overflow类似。

Answer 4

在这里工作演示

您可以模拟溢出：隐藏而不改变表格布局，只需在TD中放置两个div：

<div style="position: relative;">
  <div style="overflow: hidden; width: 320px; height: 150px;">
    content
  </div>
</div>

请参阅 JSFiddle 上的代码

Answer 5

如果你想对

特定的宽度和高度有溢出，你应该将CSS属性display:block添加到<td>，正如其他人之前所说的宽度溢出，你应该设置white-space:nowrap它防止你的文本换行，这是一个工作示例，overflow:scroll更好的下行