CSS / Javascript强制html表格行在一行答案

【问题标题】：CSS/Javascript to force html table row on a single lineCSS / Javascript强制html表格行在一行
【发布时间】：2009-01-08 23:01:50
【问题描述】：

我有一个如下所示的 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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

在您的 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 将使用特定于浏览器的 text-overflow:ellipsis 样式在溢出的情况下放置一个省略号。也有自动do the same in FireFox的方法，但我自己没有测试过。

更新 2

我开始使用 Justin Maxwell 的 this truncation code 几个月了，它在 FireFox 中也能正常工作。

【讨论】：

其实我已经试过了。它只是将表格展开，迫使它保持在一条线上，但增加了表格的宽度。我正在更新问题以澄清。
现在查看更新：太棒了！这正是我想要的。
又一次更新...自从 Firefox 7 于 2011 年底发布以来，Firefox 就支持文本溢出。现在它们甚至支持实验性标签，而其他浏览器不支持。 developer.mozilla.org/en/CSS/text-overflow

【解决方案2】：

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

此 CSS 应该适用于您的示例 HTML：

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

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

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

【讨论】：

【解决方案3】：

试试：

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

【讨论】：

【解决方案4】：

如果您需要在一行中输入此代码

white-space:nowrap

【讨论】：

【解决方案5】：

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

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

就将内部附加的… 添加到剪切文本而言，似乎无法在 FireFox 中完全复制 MS（和其他）使用 text-overflow:ellipsis 的内容；尤其是没有 javascript，这几天经常被用户关闭。

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

但是，我需要在我的一个 progs 管理窗口中剪裁动态宽度表。因此，只要稍微摆弄一下，就可以从“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/en-us/library/ms531174(VS.85).aspx

希望它对身体有所帮助。

【讨论】：

【解决方案6】：

正如 cletus 所说，您应该使用 white-space: nowrap 来避免换行，并使用 overflow:hidden 来隐藏溢出。但是，为了使文本被视为溢出，您应该设置 td/th 宽度，因此如果文本需要超过指定宽度，它将被视为溢出，并将被隐藏。

此外，如果您提供示例网页，响应者可以提供带有您喜欢的修复的更新页面。

【讨论】：

【解决方案7】：

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

http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

【讨论】：

很有趣，但我不在乎我是否失去了这个词。我只是想提供一个预览。

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

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

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; 
}

前单位是高度的相对字体大小，如果您使用像素来设置字体大小，您可能希望使用它来代替。

【讨论】：