我有一个HTML表,如下所示:
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
但我希望它能隐藏溢出。这里的原因是,文本包含指向更多细节的链接,而“换行”在我的布局中浪费了大量空间。它应该是这样的(不增加列或表的宽度,因为它们会从屏幕上消失/否则会创建一个水平滚动条):
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
我尝试了很多不同的CSS技术来实现这一点,但是我不能让它变得正确。Mootable是我发现的唯一能做到这一点的东西:http://joomlicious.com/mootable/,但我不知道他们是怎么做到的。有谁知道我如何使用CSS和/或Javascript在我自己的表中做到这一点,或者Mootables如何做到这一点?
示例HTML:
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>
发布于 2009-01-08 23:04:30
在td上使用CSS属性white-space: nowrap和overflow: hidden。
更新
刚看了你的评论,不知道我在想什么,我做过很多次了,我都忘了我是怎么做的了。对于我来说,这是一种在大多数浏览器中都工作得很好的方法。我没有尝试约束td,而是在td中使用了一个div来处理溢出实例。这有一个很好的副作用,可以将填充、页边距、背景颜色等添加到div中,而不是尝试设置td样式。
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
作为额外的好处,IE将在溢出的情况下使用浏览器特定的文本溢出:省略号样式放置一个省略号。也有一种自动执行do the same in FireFox的方法,但我还没有亲自测试过。
更新2
我开始使用贾斯汀·麦克斯韦尔的this truncation code已经有几个月了,它在FireFox中也能正常工作。
发布于 2009-01-09 03:09:41
这里的技巧是使用深奥的table-layout:fixed
规则
这个CSS应该和你的HTML样例一起工作:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
您还应该为<td>
指定显式列宽。
table-layout:fixed
规则说“这个表格的单元格宽度取决于我所说的内容,而不是单元格中的实际内容”。这通常很有用,因为浏览器可以在收到第一个<tr>
后开始显示表。否则,浏览器必须先接收整个表,然后才能计算列宽。
发布于 2009-01-08 23:04:55
尝试:
td, th {
white-space: nowrap;
overflow: hidden;
}
https://stackoverflow.com/questions/426398
复制相似问题