【问题标题】：HTML overflow not working for TD and overflow concept for TRHTML 溢出不适用于 TD，溢出概念适用于 TR
【发布时间】：2017-08-13 19:02:20
【问题描述】：

<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 标签才能实现。

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

【问题讨论】：

标签： html css html-table overflow

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

Working Demo Here

您可以在不改变表格布局的情况下模拟溢出：隐藏，只需在 TD 内放置两个 div：

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

    content

  </div>
</div>

在JSFiddle上查看你的代码

【讨论】：

你不需要添加绝对位置

【解决方案5】：

如果你想溢出特定的宽度和高度，你应该添加css属性display:block到<td>，正如其他人之前所说的宽度溢出你应该设置white-space:nowrap它可以防止你的文本被换行， this 是 working example 和 overflow:scroll，以便更好地理解

【讨论】：