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:

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

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>

Without white-space the table is 500px wide, and the text takes more than one line.

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.

What am I doing wrong?

回答1:

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

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

UPDATE 3

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

回答2:

Add the following to your stylesheet:

table { white-space: nowrap; }

回答3:

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.

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

Simple And Useful. use above code for

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

来源：https://stackoverflow.com/questions/3379220/how-to-limit-a-table-cell-to-one-line-of-text-using-css

标签

css

html-table

overflow