html - 将表格单元格限制为只有一行文本？ 'overflow' 和 'white-space' 不工作

Question

Fiddle

我有一个包含多列和多行的表格，我试图将每个单元格限制为只有一行文本。第二行及以后我想隐藏，因为多行会破坏每个表行的高度。

首先，一些销售包含 <p>标记，并且以下代码无法解决此问题:

table {
    table-layout: fixed;
}

td {
    overflow: hidden;
    white-space: nowrap;
    width: 50px;
}

如何有效地将每个单元格限制为只有一行文本？

Answer 1

nowrap在表格单元格中运行良好，但您使用的是 <br>强制线中断。只需输入一些带空格的长文本，您就会发现它工作正常:

<td><p>3 4 5 5 5 5 5 5 5 5 5 5 5</p></td>

http://jsfiddle.net/UNk64/

如果你将 text-overflow:ellipsis;和剥离<p>标签，你可以让它以 ... 结尾:

http://jsfiddle.net/UNk64/2/

如果你真的想忽略<br>在 td 中，您可以使用此 css walkaround:

td br{
    line-height: 0px;
    display:none;
}

http://jsfiddle.net/UNk64/5/