CSS/Javascript强制html表格行在单行上
我有一个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>回答 10
Stack Overflow用户
发布于 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中也能正常工作。
Stack Overflow用户
发布于 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>后开始显示表。否则，浏览器必须先接收整个表，然后才能计算列宽。
Stack Overflow用户
发布于 2009-01-08 23:04:55
尝试：
td, th {
white-space: nowrap;
overflow: hidden;
}https://stackoverflow.com/questions/426398
复制相似问题
腾讯云开发者
