如何使用CSS将表单元格限制为一行文本？ [英] How to limit a table cell to one line of text using CSS?

问题描述

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

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:

• 
  
• CSS：将元素限制为1行

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

事实上，我的问题与第一个问题完全相似，但由于链接已经死了，我无法学习。两个答案都说使用 white-space：nowrap 。

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.

由于我无法显示您的代码，我重现了问题：

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>

没有白色空间

但是 white-space：nowrap 会使浏览器忽略 width 指令，并增加表格的宽度，直到所有数据符合一行为止。

But white-space: nowrap makes the browser simply ignore the width directive and increase the width of the table until all data fits in one line.

错了？感谢

推荐答案

溢出只有当它知道从哪里开始考虑溢出。您需要设置< td>

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>

TAKE 2 的width和height属性， strong>

TAKE 2

尝试添加 table-layout：fixed; width：500px; 到表格样式。

UPDATE 3

确认此操作有效： http://jsfiddle.net/e3Eqn/

这篇关于如何使用CSS将表单元格限制为一行文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！