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

我遇到了长长的字符串伸出我的表的问题，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>

在加载时，文字会，无论表格的宽度，伸出来显示所有的字符串。我所追求的是让任何经过细胞测量的部分字符串不被显示。这甚至有可能与表，如果是这样，我做错了什么？

来源

2009-10-29 canadiancreed

溢出仅适用于块级元素。表格元素不是块元素。如果您想要获得这些效果，请在表格单元格内放置一个<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>

来源

2009-10-29 14:45:51 cletus

这样做。非常感谢，并挽救了我的头发！猜猜我需要更多地阅读我的CSS。 – canadiancreed 2009-10-29 14:53:25

这对CSS来说是相当神秘的一面。任何人只有在发现这个确切问题时才会发现。相信我，在那里做到了。 – cletus 2009-10-29 14:55:06

CSS 2.1说'溢出'确实对表格单元格有效。但实际上只有WebKit支持在单元格上滚动。 “隐藏”虽然可以。 – bobince 2009-10-29 15:09:28

-1

不知道这是不应该被工作表单元格，但最好你不是真的想隐瞒他们无论如何。我建议你使用连字符长的话，你可以用下面的LIB（只需要JS的几行来实现）很容易做到：

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

例子：

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

来源

2009-10-29 14:46:05

正在考虑类似的东西，但不幸的是，设计决定并不取决于我。 – canadiancreed 2009-10-29 14:48:34

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

来源

2009-10-29 14:55:34 bugtussle

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

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

和你的榜样按预期工作。您应该也可以从表格单元中删除width: 100px，因为与100％宽度的表格结合使用没有任何意义。（虽然有固定的表格布局也没关系，因为只有细胞或<col> S的第一行有列宽任何影响。）

注overflow: scroll或auto不表格单元格在大多数浏览器。（它在WebKit中有。）

来源

2009-10-29 15:07:51 bobince

“表格式：固定式”不会改变一件事情。高度仍然扩大。使用webkit测试Chrome – matteo 2017-07-31 16:02:20

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

回答

相关问题