ine*_*ine 68 html javascript css
我有一个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技术来试图解决这个问题,但我无法让它变得正确.Mootables是我发现的唯一这样做: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>
Dav*_*cia 94
在你的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将使用浏览器特定的文本溢出:省略号样式在溢出的情况下放置省略号.有一种方法可以在FireFox中自动执行相同的操作,但我自己没有测试过.
我开始使用Justin Maxwell的截断代码几个月了,它在FireFox中也能正常工作.
Tri*_*ych 30
这里的诀窍是使用深奥的table-layout:fixed规则
这个CSS应该对你的示例HTML起作用:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
您还应该为<td>s 指定显式列宽.
该table-layout:fixed规则说"此表的单元格的宽度取决于我的话,而不是在细胞的实际内容".这通常很有用,因为浏览器可以在收到第一个表后开始显示表<tr>.否则,浏览器必须先接收整个表,然后才能计算列宽.