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

问题描述：

我有一个用户表，其中每行包含他们的名字，电子邮件地址等。对于某些用户来说，这一行是一个文本行高，其他一些是两行等等。但是我希望表格的每一行都是一个文本行高，将其余部分截断。如何使用CSS将表格单元限制为一行文本？

我看到了这两个问题：

A column of a table needs to stay in one line (HTML/CSS/Javascript)
CSS: limit element to 1 line

其实我的问题是完全类似于第一个，但由于该链接是死，我不能学习它。两个答案都说要使用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表是500像素宽，本文以多行。

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

我在做什么错？

不是在这个例子中，但在我的真实网站是的。无论如何，我不认为没有文档类型与这个问题有关。 – Tomaka17 2010-07-31 18:21:33

答

溢出只有在知道从哪里开始考虑溢出时才会起作用。您需要设置<td>

TAKE 2

尝试增加table-layout: fixed; width:500px;表的风格的宽度和高度属性。

更新3

证实了这一工作：http://jsfiddle.net/e3Eqn/

我在提问之前已经试过了，但它也不起作用。我编辑了这个问题来添加它 – Tomaka17 2010-07-31 18:22:13

@ Tomaka17，我编辑了我的答案以包含其他说明。 – 2010-07-31 18:44:29

有没有什么办法可以说“如果这个元素不在里面，溢出是元素的大小”？ – Claudiu 2016-07-03 07:02:15

答

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

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

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

谢谢，我给你+1但是我记得Mike Sherov的回答是被接受的，因为我知道他的文本溢出的存在感谢他 – Tomaka17 2010-07-31 18:44:31

+1。这非常接近。 – 2010-07-31 18:49:54

答

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

table { white-space: nowrap; }

答

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

简单而有用的。使用上面的代码

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

相关推荐