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在具有不同宽度列的表格上隐藏溢出文本

回答

相关问题