CSS / Javascript强制在一行上的html表行 [英] CSS/Javascript to force html table row on a single line
问题描述
我有一个HTML表格，如下所示：
I have an HTML table that looks like this:
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
但我想让它隐藏溢出。这里的原因是文本包含更多细节的链接，并且具有包装在我的布局中浪费了大量的空间。它应该这样（不增加列或表的宽度，因为他们会离开屏幕/创建一个水平滚动条否则）：
But I want it to hide the overflow. The reason here is that the text contains a link to more details, and having the "wrapping" wastes lots of space in my layout. It should like this (without increasing the widths of the columns or the table, because they'll go off the screen/create a horizontal scrollbar otherwise):
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
我尝试了很多不同的CSS技术，不要让它出来了。 Mootables是我发现的唯一的事情： http://joomlicious.com/mootable/ ，但我不知道他们是如何做到的。有没有人知道我可以用我自己的表使用CSS和/或Javascript，或如何Mootables做到这一点？
I've tried lots of different CSS techniques to try to get this, but I can't get it to turn out right. Mootables is the only thing I've found that does this: http://joomlicious.com/mootable/, but I can't figure out how they do it. Does anyone know how I can do this with my own table using CSS and/or Javascript, or how Mootables does it?
示例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>
推荐答案
使用CSS属性 white-space：nowrap 和
Use the CSS property white-space: nowrap and overflow: hidden on your td.
只是看到你的评论，不知道我在想什么，我做了这么多次，我忘了我怎么做。这是在大多数浏览器中为我工作良好的方法...而不是试图限制td，我使用一个div内的td将处理溢出实例。这有一个很好的副作用，能够添加您的填充，边距，背景颜色等到你的div，而不是试图风格的td。
Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the 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将在溢出的情况下使用浏览器特定的文本-overflow：省略号样式。有一种方法可以在FireFox中执行相同操作
As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to do the same in FireFox automatically too, but I have not tested it myself.
我开始使用这个截断代码由Justin Maxwell几个月了，在FireFox也能正常工作。
I started using this truncation code by Justin Maxwell for several months now which works properly in FireFox too.
这篇关于CSS / Javascript强制在一行上的html表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
