溢出：使用表格時隱藏不起作用

我遇到了長長的字符串伸出我的表的問題，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

溢出：使用表格時隱藏不起作用

回答

相關問題