Question

我有一个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>

Answer 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将使用浏览器特定的文本溢出：省略号样式在溢出的情况下放置省略号。有一种方法可以自动do the same in FireFox，但我自己没有测试过。

更新2

我开始使用Justin Maxwell的this truncation code几个月了，它也适用于FireFox。

Answer 2

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

这个CSS应该对你的示例HTML起作用：

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

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

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

Answer 3

尝试：

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

Answer 4

对于那些更感兴趣的人：

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

对于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

希望它对某些人有所帮助。

Answer 5

您需要在一行文本中输入以下代码

myArr = [
  {show: 0},
  {show: 0},
  {show: 0},
];
flag = true;
if (flag) {
  for (let index = 0, flag = false; index < myArr.length && flag == false; index++) {
    if (myArr[index].show == 1) {
      flag = true;
    }
    console.log(myArr[index], index, flag)
  }
}

Answer 6

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

此外，如果您提供示例网页，响应者可以提供包含您喜欢的修补程序的更新页面。

Answer 7

如果你隐藏溢出并且有一个很长的单词，你可能会丢失这个单词，所以你可以更进一步使用“自动换行”css属性。

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

Answer 8

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

Answer 9

使用position：absolute;和宽度：xxx％;在td-Element上。

Answer 10

如果您不希望文本换行，并且您不希望列的大小变大，则在列上设置宽度和高度，并在样式表中设置“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; 
}

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

CSS / Javascript强制html表行在一行

10 个答案:

更新

更新2