Html 溢出：隐藏在使用表时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1644215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow:hidden not working when using tables
提问by canadiancreed
I'm having issues with long strings of text stretching out my tables and overflow:hiddendoes not seem to be doing what I exect. Here's the sample code I am using to test this effect:
我的表格中出现了长文本字符串的问题，并且overflow:hidden似乎没有按照我的要求行事。这是我用来测试这种效果的示例代码：
<html>
<head>
<style type="text/css">
td.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
td.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
<tr>
<td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
<tr>
<td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
</body>
</html>
When loaded, the text will, regardless of the table width, stretch out to display all of the string. What I'm after is to have any part of the string that would go past the cell measurement not be display. Is this even possible with tables, and if so, what am I doing wrong?
加载后，无论表格宽度如何，文本都会伸展以显示所有字符串。我所追求的是让超过单元格测量值的字符串的任何部分都不会显示。这甚至可能与表格一起使用，如果是这样，我做错了什么？
回答by cletus
Overflow only works on block level elements. Table elements aren't block elements. If you want to get those effects put a <div>inside the table cell and apply the effects to the <div>.
溢出仅适用于块级元素。表格元素不是块元素。如果您想获得这些效果，请将 a<div>放在表格单元格内并将效果应用于<div>.
td.scroll div {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;
}
td.hidden div {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}
with:
和：
<table width="100%">
<tr>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
<tr>
<td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
<tr>
<td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
</table>
回答by bobince
By default the auto-table-layout mechanism expands the table width to fit the minimum cell content width. Tell it not to do that with the table-layoutproperty:
默认情况下，自动表格布局机制会扩展表格宽度以适应最小单元格内容宽度。告诉它不要使用table-layout属性这样做：
<table width="100%" style="table-layout: fixed">
and your example works as expected. You should probably also remove the width: 100pxfrom the table cells, since that makes no sense in combination with a 100%-width table. (Although with fixed table layout it doesn't matter, as only the first row of cells or <col>s has any bearing on the column widths.)
并且您的示例按预期工作。您可能还应该width: 100px从表格单元格中删除，因为这与 100% 宽度的表格结合使用毫无意义。（尽管使用固定的表格布局并不重要，因为只有第一行单元格或<col>s 与列宽有任何关系。）
Note overflow: scrollor autodoesn't work for table cells in most browsers. (It does in WebKit.)
注意overflow: scroll或auto不适用于大多数浏览器中的表格单元格。（它在 WebKit 中。）
回答by bugtussle
<html>
<head>
<style>
td { width: 33%; height: 2em; }
td div { width:100%;height:100%;overflow:hidden }
</style>
</head>
<body>
<table border="1" style="width:300px;">
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr>
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
</table>
</body>
</html>
回答by reko_t
Not sure if it isn't supposed to be working for table cells, but ideally you don't really want to hide them anyway. I suggest you hyphenate long words, which you can do easily with the following lib (only take few lines of js to implement):
不确定它是否不应该用于表格单元格，但理想情况下，您无论如何都不想隐藏它们。我建议您将长单词连字符，您可以使用以下库轻松完成（只需几行 js 即可实现）：
http://code.google.com/p/hyphenator/
http://code.google.com/p/hyphenator/
Example:
例子：
http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html
http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html
