Working Demo Here

Question

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

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

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

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

Working Demo Here

你可以模拟溢出：隐藏而不改变表格布局，只需将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要将文字换行，this为working example overflow:scroll，以便更好地进行无法识别

HTML溢出不适用于TR和TD的溢出概念

5 个答案:

Working Demo Here