CSS / Javascript强制HTML表格行在一行
我有一个如下所示的HTML表格：
------------------------------------------------- |Column 1 |Column 2 | ------------------------------------------------- |this is the text in column |this is the column | |one which wraps |two test | ------------------------------------------------- 但是我想让它隐藏溢出。 这里的原因是文本包含了更多细节的链接，并且“包装”浪费了我的布局中的大量空间。 它应该这样（不增加列或表的宽度，因为它们会离开屏幕/否则创build一个水平滚动条）：
------------------------------------------------- |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>
使用CSS属性white-space：nowrap和overflow：隐藏在你的td上。
更新
刚刚看到你的评论，不知道我在想什么，我这么做了很多次，我忘记了我是怎么做的。 这是在大多数浏览器对我来说工作得很好的方法…而不是试图约束td，我在td内使用一个将处理溢出实例的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中做同样的事情，但是我没有自己testing过。
更新2
我开始使用Justin Maxwell的这个截断代码几个月，现在FireFox也能正常工作。
这里的技巧是使用深奥的table-layout:fixed规则
这个CSS应该适用于你的示例HTML：
table {table-layout:fixed} td {overflow:hidden; white-space:nowrap}
您也应该为<td>指定明确的列宽。
table-layout:fixed规则说：“这个表的单元格宽度取决于我说的内容，而不是单元格中的实际内容”。 这通常很有用，因为浏览器可以在接收到第一个<tr>之后开始显示表格。 否则，浏览器在计算列宽之前必须接收整个表。
尝试：
td, th { white-space: nowrap; overflow: hidden; }
对于那些更感兴趣的：
现有的dynamic表单元格：##长文本没有空格，例如电子邮件地址##
它似乎是MS（及其他）使用text-overflow:ellipsis的完整复制text-overflow:ellipsis只要将内部附加的内容添加到剪切文本中， text-overflow:ellipsis就不能在FireFox中被使用; 特别是没有经常closures这些日子的JavaScript。
我发现的所有想法都无法解决dynamicresize和长文本没有空格的问题。
但是，我有一个需要在我的编辑pipe理窗口中的dynamic宽度表中裁剪。 所以有一点小窍门一个可以接受的所有浏览器的答案可以从提供的样品在“MSDN”黑客入侵。
即
<table width="20%" border="1" STYLE="position: absolute; top: 100;"> <tr> <td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;"> <DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px; font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;"> <NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV> </DIV> </td> </tr> </table>
只有小小的缺点是Firefox用户看不到“…”位; 这是summink我不介意在这个阶段。
如果实施这个非常重要的有用的select，未来的FF应该希望能够优雅地解决。 所以现在我不需要使用不那么有利的未来派非桌面内容来重写（不要争辩，现在围绕着它的原因有很多破碎的网站）。
感谢： http : //msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
希望它有助于一些身体。
正如Cletus所说，你应该使用white-space: nowrap来避免行换行，并且overflow:hidden来隐藏溢出行为。 但是，为了使文本被视为溢出，应该设置td / th的宽度，以防万一文本超过指定的宽度时，将被视为溢出，并将被隐藏。
此外，如果您提供示例网页，响应者可以提供您喜欢的修补程序的更新页面。
如果你隐藏了溢出并且有一个长词，你可能会丢掉这个词，所以你可以进一步使用“word-wrap”css属性。
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
我不知道是否值得使用PHP（或另一种服务器端脚本语言）或Javascript截断string到正确的长度（虽然计算正确的长度是棘手的，除非你使用固定宽度的字体）？
如果您不希望文本换行，而又不希望列的大小变大，请在列上设置宽度和高度，然后在样式表中设置“overflow：hidden”。
要仅在一列上执行此操作，您将需要向每行上的该列添加一个类。 否则，您可以将其设置在所有列上，这取决于您。
HTML：
<table width="300px"> <tr> <td>Column 1</td><td>Column 2</td> </tr> <tr> <td class="column-1">this is the text in column one which wraps</td> <td>this is the column two test</td> </tr> </table>
stylsheet：
.column-1 { overflow: hidden; width: 150px; height: 1.2ex; }
前单位是高度的相对字体大小，如果您使用像素来设置字体大小，您可能希望使用它。
