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

时间：2022-03-08 00:28:50

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.

事实上，我的问题与第一个问题完全相似，但由于链接已经死亡，我无法研究它。两个答案都说使用白色空间：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-space the table is 500px wide, and the text takes more than one line.

没有空格，表格宽度为500px，文本占用多行。

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.

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

What am I doing wrong?

我究竟做错了什么？

4 个解决方案

#1

21  

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>

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

TAKE 2

采取2

Try adding table-layout: fixed; width:500px; to the table's style.

尝试添加table-layout：fixed;宽度：500像素;桌子的风格。

UPDATE 3

更新3

confirmed this worked: http://jsfiddle.net/e3Eqn/

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

#2

28  

Add the following to your stylesheet:

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

table { white-space: nowrap; }

table {white-space：nowrap; }

#3

6  

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像素内使用固定布局。

#4

2  

  <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

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

#1

21  

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>

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

TAKE 2

采取2

Try adding table-layout: fixed; width:500px; to the table's style.

尝试添加table-layout：fixed;宽度：500像素;桌子的风格。

UPDATE 3

更新3

confirmed this worked: http://jsfiddle.net/e3Eqn/

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

#2

28  

Add the following to your stylesheet:

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

table { white-space: nowrap; }

table {white-space：nowrap; }

#3

6  

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像素内使用固定布局。

#4

2  

  <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

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

标签：

相关文章