CSS在具有不同寬度列的表格上隱藏溢出文本

我想要顯示具有不同寬度的列的表格。我希望表格的每一列都能隱藏溢出文本。我嘗試了很多東西，似乎沒有任何東西能提供所需的輸出。CSS在具有不同寬度列的表格上隱藏溢出文本

例如，我想要這樣的東西。

|-Row 1-|-----------Row 2------------|---------Row 3 ----------|---Row 4 ---| 
|Hello..|Here is some longer text t..|You get the idea   | Blah Bla...|

我曾嘗試在CSS以下...

.ex_table { table-layout:fixed } 
.ex_table tr td{ overflow:hidden; text-overflow: ellipsis; white-space:nowrap; } 

.ex_table .cell_1 { width:10%; } 
.ex_table .cell_2 { width:40%; } 
.ex_table .cell_3 { width:30%; } 
.ex_table .cell_4 { width:20%; }

但寬度會被忽略（大概是因爲固定寬度的？），並顯示錶，其中每列是一樣的寬度。

問題解決了

上述實際解決方案的工作，但我在我的表了表頭。您需要設置標題的寬度而不是單元格的寬度！

來源

2013-07-11 James Fazio

如果沒有需要支持舊的瀏覽器，在這裏嘗試接受的答案：
CSS text-overflow in a table cell?

來源

2013-07-11 21:57:54

嗯，我需要向下不幸支持IE7。 –

哦，你在IE7中測試這個嗎？對於IE7（以及一些較新版本的IE），您需要額外的技巧來正確支持表格中的文本溢出。 –

好吧，聽起來很有趣，謝謝你的頭！ –

也許你需要添加一個固定的高度？ .ex_table tr td {height：20px;溢出：隱藏;文本溢出：省略號;空白：NOWRAP; }

來源

2013-07-11 21:58:07 digitaldonkey

不要認爲高度與它有關，嘗試過這一點，它不起作用。 –

將寬度添加到表CSS ...您基本上將單元格寬度設置爲導致此問題的nothing或auto的百分比。通過在表CSS中添加一個寬度，可以爲單元格寬度提供明確的大小定義。

.ex_table { table-layout:fixed; width: 100%;} 
.ex_table tr td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 5px; 
    border: 1px solid #aaa;} 

.ex_table .cell_1 { width:10%; } 
.ex_table .cell_2 { width:40%; } 
.ex_table .cell_3 { width:30%; } 
.ex_table .cell_4 { width:20%; }

jsFiddle demo（僅適用於Chrome測試）

來源

2013-07-11 22:03:13 Scott

這似乎在小提琴工作很好，但它不適用於我的表，必須有一些衝突的CSS表格繼承。 –

找出問題所在，我的表格中有表格標題，您需要設置這些表格的寬度！ –

CSS在具有不同寬度列的表格上隱藏溢出文本

回答

相關問題