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

【问题标题】：How to limit a table cell to one line of text using CSS?如何使用 CSS 将表格单元格限制为一行文本？
【发布时间】：2011-03-23 16:40:30
【问题描述】：

我有一个用户表，其中每一行都包含他们的姓名、电子邮件地址等。对于某些用户，这一行是一个文本行高，对于其他一些用户是两个，等等。但我希望表格的每一行都是一个文本行高，截断其余的。

我看到了这两个问题：

实际上我的问题与第一个问题完全相同，但由于链接已失效，我无法研究它。两个答案都说使用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 指令并增加表格的宽度，直到所有数据都放在一行中。

我做错了什么？

【问题讨论】：

在这个例子中没有，但在我的真实网站上是的。无论如何，我认为没有 doctype 与此问题无关。

标签： css html-table overflow

【解决方案1】：

将以下内容添加到您的样式表中：

table { white-space: nowrap; }

【讨论】：

【解决方案2】：

只有当它知道从哪里开始考虑溢出时，溢出才会起作用。需要设置<td>的width和height属性

参加 2 次strong>

尝试将table-layout: fixed; width:500px; 添加到表格的样式中。

更新 3

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

【讨论】：

我在问问题之前已经尝试过了，它也不起作用。我编辑了问题以添加它
@Tomaka17，我编辑了答案以包含其他说明。
有什么办法可以说“如果没有这个元素，溢出就是元素的大小”？
此外，添加text-overflow:ellipsis 可以帮助用户区分显示整个数据的单元格和需要更多空间并截断值的单元格。
感谢 jsfiddle 链接。我只需要！

【解决方案3】：

将以下内容添加到您的样式表中：

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

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

【讨论】：

谢谢，我给你 +1 但是我将 Mike Sherov 的回答标记为已接受，因为我感谢他了解了文本溢出的存在

【解决方案4】：

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

简单实用。使用上面的代码

【讨论】：

【解决方案5】：

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

【讨论】：