如何使用 CSS 将表格单元格限制为一行文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3379220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit a table cell to one line of text using CSS?
提问by Tomaka17
I have a table of users where each row contains their names, e-mail address, and such. For some users this row is one text line high, for some others two, etc. But I would like that each row of the table be one text line high, truncating the rest.
我有一个用户表，其中每一行都包含他们的姓名、电子邮件地址等。对于某些用户，这一行是一个文本行高，对于其他一些用户是两个，等等。但我希望表格的每一行都是一个文本行高，截断其余部分。
I saw these two questions:
我看到了这两个问题：
In fact my question is exactly similar to the first one, but since the link is dead I can't study it. Both answers say to use white-space: nowrap. However this doesn't work, maybe I'm missing something.
事实上，我的问题与第一个完全相似，但由于链接已死，我无法研究它。两个答案都说要使用white-space: nowrap. 但是这不起作用，也许我错过了一些东西。
Since I can't show you the code, I reproduced the problem:
由于我无法向您展示代码，因此我重现了问题：
<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>
Without white-spacethe table is 500px wide, and the text takes more than one line.
没有white-space表格是 500px 宽，文本需要超过一行。
But white-space: nowrapmakes the browser simply ignore the widthdirective and increase the width of the table until all data fits in one line.
但是white-space: nowrap让浏览器简单地忽略该width指令并增加表格的宽度，直到所有数据都适合一行。
What am I doing wrong?
我究竟做错了什么？
采纳答案by Mike Sherov
overflow will only work if it knows where to start considering it overflown. You need to set the width and height attribute of the <td>
溢出只有在它知道从哪里开始考虑它溢出时才会起作用。您需要设置宽度和高度属性<td>
TAKE 2
取 2
Try adding table-layout: fixed; width:500px;to the table's style.
尝试添加table-layout: fixed; width:500px;到表格的样式。
UPDATE 3
更新 3
confirmed this worked: http://jsfiddle.net/e3Eqn/
确认这有效：http: //jsfiddle.net/e3Eqn/
回答by Googuez
Add the following to your stylesheet:
将以下内容添加到您的样式表中：
table { white-space: nowrap; }
table { white-space: nowrap; }
回答by cm2
Add the following to your stylesheet:
将以下内容添加到您的样式表中：
table{
width: 500px; table-layout:fixed;
}
You need to add the table width to ensure that the next property will fit the elements to the specified size. The table-layout property here forces the browser to use a fixed layout within the 500 pixels it's given.
您需要添加表格宽度以确保下一个属性将元素适合指定的大小。此处的 table-layout 属性强制浏览器在给定的 500 像素内使用固定布局。
回答by user2782717
<table border="1" style="width:200px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td nowrap="nowrap">
Single line cell just do it</td>
<td>
multiple lines here just do it</div></td>
</tr>
</table>Simple And Useful. use above code for
简单实用。使用上面的代码
回答by Souleymane Atto Deba
<table border="1" style="width:200px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td nowrap="nowrap">Single line cell just do it</td>
<td>multiple lines here just do it</td>
</tr>
</table>