如何使用CSS将表格单元格限制为一行文本？

Question

我有一个用户表,每行包含他们的姓名,电子邮件地址等.对于一些用户来说,这一行是一行文本行,有些是另外两行等等.但是我希望表中的每一行都是一行文本行,截断其余部分.

我看到了这两个问题:

• 表的一列需要保持一行(HTML/CSS/Javascript)
• CSS:将元素限制为1行

事实上,我的问题与第一个问题完全相似,但由于链接已经死亡,我无法研究它.两个答案都说使用white-space: nowrap.然而,这不起作用,也许我错过了一些东西.

由于我无法向您展示代码,我转载了问题:

<style type="text/css">
td {
    white-space: nowrap;
    overflow: hidden;
    width: 125px;
    height: 25px;
}
</style>

<div style="width:500px">
<table>
    <tr>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
    </tr>
</table>
</div>

没有white-space表是500px宽,文本需要多行.

但是white-space: nowrap让浏览器只是忽略width指令并增加表的宽度,直到所有数据都适合一行.

我究竟做错了什么？

Answer 1

将以下内容添加到样式表中:

table { white-space: nowrap; }

Answer 2

溢出只有在知道从哪里开始考虑溢出时才会起作用.你需要设置的宽度和高度属性<td>

采取2

尝试添加table-layout: fixed; width:500px;表格的样式.

更新3

确认这有效:http://jsfiddle.net/e3Eqn/

Answer 3

将以下内容添加到样式表中:

table{
     width: 500px; table-layout:fixed;
}

您需要添加表格宽度以确保下一个属性适合指定大小的元素.这里的table-layout属性强制浏览器在给定的500像素内使用固定布局.