CSS / Javascript将html表行强制为一行

Question 1

我有一个看起来像这样的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>

Question 2

使用CSS属性white-space：nowrap和overflow：隐藏在您的td中。

更新资料

刚刚看到您的评论，不确定我在想什么，我已经做了很多次，却忘记了如何做。对于我来说，这是一种在大多数浏览器中都很好用的方法...而不是试图限制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会使用浏览器特定的text-overflow：省略号样式在出现溢出时放置省略号。也可以在FireFox中自动执行相同的操作，但是我自己尚未对其进行测试。

更新2

我开始使用贾斯汀·麦克斯韦（Justin Maxwell）的截断代码已有几个月了，它在FireFox中也可以正常使用。

Question 3

这里的技巧是使用深奥的table-layout:fixed规则

该CSS应该与您的示例HTML兼容：

table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}

您还应该为指定明确的列宽<td>。

该table-layout:fixed规则说“此表的单元格的宽度取决于我的话，而不是在细胞的实际内容”。通常这很有用，因为浏览器可以在收到第一个表格后开始显示表格<tr>。否则，浏览器必须先接收整个表格，然后才能计算列宽。

Question 4

尝试：

td, th {
  white-space: nowrap;
  overflow: hidden;
}

Question 5

您需要在一行中输入文本的地方将此代码

white-space:nowrap

Question 6

对于那些进一步感兴趣的人：

现有动态表格单元格：##没有空格的长文本，即电子邮件地址##

似乎完全复制了MS（及其他）对的使用（text-overflow:ellipsis在FireFox中无法复制），只要考虑到内部附加…到剪切文本上即可。尤其是在没有JavaScript的情况下，这些天来用户经常关闭。

我发现所有可以帮助我的想法都无法解决动态调整大小和长文本而没有空格的问题。

但是，我需要在我的程序管理窗口之一中剪切动态宽度表。因此，只要稍作改动，就可以从“ 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用户看不到“…”位。我现阶段并不介意这是总结。

如果实施此非常重要的有用选项，则希望将来的FF应该能够妥善解决。因此，现在我也不需要使用不太受欢迎的未来派非表式内容进行重写（不要争论；近来，有很多破碎的网站围绕着它的原因）。

感谢：http : //msdn.microsoft.com/zh-CN/library/ms531174(VS.85).aspx

希望它对某些身体有帮助。

Question 7

就像cletus所说的那样，您应该white-space: nowrap避免使用自动换行，并overflow:hidden隐藏溢出。但是，为了使文本被认为是溢出的，您应该设置td / th宽度，这样，如果文本需要的宽度大于指定的宽度，它将被视为溢出，并且将被隐藏。

另外，如果您提供了一个示例网页，则响应者可以为您更新的页面提供所需的修复程序。

Question 8

如果您隐藏了溢出并且单词很长，则可能会丢失该单词，因此您可以更进一步，并使用“ word-wrap” css属性。

http://msdn.microsoft.com/zh-CN/library/ms531186(VS.85).aspx

Question 9

我想知道是否值得使用PHP（或其他服务器端脚本语言）或Javascript将字符串截断为正确的长度（尽管计算正确的长度很麻烦，除非您使用固定宽度的字体）？

Question 10

使用位置：绝对；宽度：xxx％；在td元素上。

Question 11

如果您不希望文本自动换行，也不希望列的大小变大，请在列中设置宽度和高度，并在样式表中设置“溢出：隐藏”。

要仅对一列执行此操作，您将需要在每一行的该列中添加一个类。否则，您可以在所有列上进行设置，具体取决于您。

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>

样式表：

.column-1
{
  overflow: hidden;
  width: 150px;
  height: 1.2ex; 
}

ex单位是高度的相对字体大小，如果您使用像素来设置字体大小，则不妨使用该单位。