CSS / Javascript强制html表行在一行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS / Javascript强制html表行在一行相关的知识，希望对你有一定的参考价值。
我有一个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>
在你的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将使用浏览器特定的文本溢出：省略号样式在溢出的情况下放置省略号。有一种方法可以自动do the same in FireFox，但我自己没有测试过。
更新2
我开始使用Justin Maxwell的this truncation code几个月了，它在FireFox中也能正常工作。
这里的诀窍是使用深奥的table-layout:fixed规则
这个CSS应该对你的示例HTML起作用：
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
您还应该为<td>s指定显式列宽。
table-layout:fixed规则说“这个表的单元格宽度取决于我说的，而不是单元格中的实际内容”。这通常很有用，因为浏览器可以在收到第一个<tr>后开始显示表格。否则，浏览器必须先接收整个表，然后才能计算列宽。
尝试：
td, th {
white-space: nowrap;
overflow: hidden;
}
对于那些有兴趣的人：
现有动态表格单元格：##没有空格的长文本，即电子邮件地址##
似乎MS（和其他）使用text-overflow:ellipsis的完全复制不能在FireFox中被欺骗，只要将内部附加的…添加到剪切文本中就可以了;特别是没有javascript，这些天通常是用户关闭。
我发现帮助我的所有想法都未能解决动态调整大小和没有空格的长文本问题。
但是，我需要在我的一个prog管理窗口中的动态宽度表中剪切。因此，有一点点摆弄可接受的所有浏览器答案都可以从“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我在这个阶段并不介意。
如果实施这个非常重要的有用选项，希望未来的FF应该优雅地解决。因此，现在我不需要使用不太有利的未来非表格内容重写（不要争辩;这些天有很多破坏的网站围绕它的原因）。
感谢：http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
希望它有助于一些人。
正如克莱图斯所说，你应该使用white-space: nowrap来避免换行，并使用overflow:hidden来隐藏溢出。但是，为了使文本被视为溢出，您应该设置第td / th宽度，因此如果文本需要超过指定的宽度，它将被视为溢出，并将被隐藏。
此外，如果您提供示例网页，响应者可以提供包含您喜欢的修补程序的更新页面。
如果你隐藏溢出并且有一个很长的单词，你可能会丢失这个单词，所以你可以更进一步使用“自动换行”css属性。
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
我想知道是否值得使用php（或其他服务器端脚本语言）或Javascript将字符串截断到正确的长度（虽然计算正确的长度是棘手的，除非你使用固定宽度的字体）？
使用位置：绝对;和宽度：xxx％;在td-Element上。
如果您不希望文本换行，并且您不希望列的大小变大，则在列上设置宽度和高度，并在样式表中设置“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>
Stylshit：
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
ex单位是高度的相对字体大小，如果您使用像素来设置您可能希望使用的字体大小。
以上是关于CSS / Javascript强制html表行在一行的主要内容，如果未能解决你的问题，请参考以下文章
当 UIPickerView 值更改时，表行在 ios 中更改