CSS/Javascript强制将html表格行放在一行上_Javascript_Html_Css

CSS/Javascript强制将html表格行放在一行上

javascript html css

CSS/Javascript强制将html表格行放在一行上,javascript,html,css,Javascript,Html,Css,我有一个如下所示的HTML表： ------------------------------------------------- |Column 1 |Column 2 | ------------------------------------------------- |this is the text in column |this is the column | |one which wraps |two t

我有一个如下所示的HTML表：

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

但我想让它隐藏溢出。这里的原因是文本包含指向更多细节的链接，而“包装”会在布局中浪费大量空间。它应该是这样的（不增加列或表的宽度，因为它们将离开屏幕/否则将创建一个水平滚动条）：

我已经尝试了很多不同的CSS技术来实现这一点，但我不能让它变成正确的。Mootables是我发现的唯一能做到这一点的东西，但我不知道它们是如何做到的。有人知道我如何使用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>

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


第1列第2列
这是第一列中包装的文本
这是第二列测试

在td上使用CSS属性和

更新刚刚看到你的评论，不知道我在想什么，我已经做了很多次了，我忘了我是怎么做的。对于我来说，这种方法在大多数浏览器中都能很好地工作。。。我没有试图约束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>


.hideextra{空白：nowrap；溢出：隐藏；文本溢出：省略号；}
第1列第2列
这是第一列中包装的文本
这是第二列测试

作为奖励，IE将使用浏览器特定的文本溢出：省略号样式在溢出时放置省略号。也有一种自动测试的方法，但我自己还没有测试过

更新2 我从Justin Maxwell开始使用它已有几个月了，它在FireFox中也能正常工作。

试试：

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

正如cletus所说，您应该使用

空白：nowrap

来避免换行，并使用

溢出：隐藏来隐藏溢出。但是，为了使文本被视为溢出，您应该设置td/th宽度，因此，如果文本需要的宽度超过指定的宽度，它将被视为溢出，并将被隐藏
此外，如果您提供一个示例网页，响应者可以提供一个更新的网页，并提供您喜欢的修复程序。
如果您隐藏溢出，并且有一个长单词，则可能会丢失该单词，因此您可以进一步使用“word wrap”css属性
我想知道是否值得使用PHP（或另一种服务器端脚本语言）或Javascript将字符串截断到正确的长度（尽管计算正确的长度很棘手，除非使用固定宽度字体）
这里的技巧是使用深奥的表布局：fixed
规则
此CSS应该适用于您的示例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>

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

您还应该为
s指定显式列宽
表格布局：fixed
规则说“此表格的单元格宽度取决于我所说的内容，而不是单元格中的实际内容”。这通常很有用，因为浏览器可以在收到第一个
后开始显示表格。否则，浏览器必须先接收整个表，然后才能计算列宽
 如果不希望文本换行，也不希望列的大小变大，请在列上设置宽度和高度，并在样式表中设置“溢出：隐藏”
要仅对一列执行此操作，您需要在每行的该列中添加一个类。否则，您可以在所有列上设置它，这取决于您
Html:
ex单位是高度的相对字体大小，如果您使用像素设置字体大小，您可能希望使用该单位。
对于进一步感兴趣的人：
现有动态表格单元格：##无空格的长文本，即电子邮件地址##
它似乎完全复制了MS（和其他人）对文本溢出的使用：在FireFox中不能复制省略号，因为要将内部附加的…
添加到剪切文本中；尤其是在没有javascript的情况下，现在用户经常关闭javascript
我找到的所有帮助我的想法都未能解决动态调整大小和没有空格的长文本的问题
然而，我需要在我的一个progs管理窗口中剪切一个动态宽度表。因此，只要稍加修改，就可以从“MSDN”提供的示例中获得一个可接受的全浏览器答案
i、 e

我们认为这些真理是不言而喻的，即人人生而平等。

唯一的小缺点是Firefox用户看不到“…”位；这是我在这个阶段并不介意的
如果实现这一非常重要的有用选项，未来的FF将有望顺利解决。因此，现在我也不需要使用不太受欢迎的未来派非表格内容来重写（不要争辩，现在有很多网站因为它而被破坏）
感谢：

希望对身体有帮助
 使用位置：绝对位置；宽度：xxx%；在td元素上。
如果需要将文本放在一行中，请将此代码
white-space:nowrap

事实上，我已经试过了。它只会使桌子展开，迫使它停留在一条线上，但会增加桌子的宽度。我正在更新问题以澄清。现在看更新：太棒了！这正是我想要的。还有一个更新。。。自2011年底Firefox7发布以来，Firefox一直支持文本溢出。他们现在甚至支持实验性标签，而其他浏览器则不支持。很有意思，但我不在乎我会不会失信。我只是想提供一个预览。
<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>

white-space:nowrap