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

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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

cle*_*tus 23

溢出仅适用于块级元素.表元素不是块元素.如果你想将这些效果放在<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;
}

Run Code Online (Sandbox Code Playgroud)

有:

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

Run Code Online (Sandbox Code Playgroud)

这是CSS的一个相当神秘的方面.任何人发现它的唯一时间是他们有这个确切的问题.相信我,在那里做到了. (5认同)
请不要将块级元素放在内联级元素中.你可以简单地将`<td>`设置为`display:inline-block'来实现你想要的. (2认同)

Answer 2

bob*_*nce 20

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

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

Run Code Online (Sandbox Code Playgroud)

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

注意overflow: scroll或auto不适用于大多数浏览器中的表格单元格.(它在WebKit中.)

归档时间：	15 年，11 月前
查看次数：	27625 次
最近记录：	9 年，4 月前