Question

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

我看到了这两个问题：

事实上，我的问题与第一个问题完全相似，但由于链接已经死亡，我无法研究它。两个答案都说使用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>

的width和height属性

TAKE 2

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

更新3

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

Answer 3

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

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

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

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

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

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

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

5 个答案: