Question

我遇到了长篇文章延伸到我的桌面的问题，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>

加载后，无论表格宽度如何，文本都会拉伸显示所有字符串。我所追求的是将不会显示超过单元格测量的字符串的任何部分。这甚至可以用表格，如果是这样，我做错了什么？

Answer 1

溢出仅适用于块级元素。表元素不是块元素。如果您想获得这些效果，请在表格单元格中添加<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;
}

使用：

<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>

Answer 2

默认情况下，自动表格布局机制会扩展表格宽度以适应最小单元格内容宽度。告诉它不要使用table-layout属性：

<table width="100%" style="table-layout: fixed">

并且您的示例按预期工作。您可能还应该从表格单元格中删除width: 100px，因为与100％宽度表结合使用是没有意义的。（虽然使用固定的表格布局并不重要，因为只有第一行单元格或<col> s对列宽有任何影响。）

注意overflow: scroll或auto对大多数浏览器中的表格单元格不起作用。（它在WebKit中。）

Answer 3

<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>

Answer 4

不确定它是否应该用于表格单元格，但理想情况下你并不想真正隐藏它们。我建议你连接长字，你可以用下面的lib轻松完成（只需要几行js来实现）：

http://code.google.com/p/hyphenator/

示例：

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

溢出：使用表时隐藏不起作用

4 个答案: