Jak ograniczyć komórkę tabeli do jednego wiersza tekstu za pomocą CSS?

Question

Mam tabelę użytkowników, gdzie każdy wiersz zawiera ich nazwiska, adres e-mail i tym podobne. Dla niektórych użytkowników ten wiersz ma jedną linię tekstu wysoką, dla niektórych dwóch itd. Ale chciałbym, aby każdy wiersz tabeli był wysoki na jedną linię tekstu, obcinając resztę.

Widziałem te dwa pytania:

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

Faktycznie moje pytanie jest dokładnie podobna do pierwszej, ale ponieważ link jest martwy nie mogę studiować to. Obie odpowiedzi mówią, że używają white-space: nowrap. Jednak to nie działa, być może brakuje mi czegoś.

Ponieważ nie mogę pokazać ci kodu, reprodukowane problemu:

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

Bez white-space tabela jest 500px szerokości, a tekst zajmuje więcej niż jedną linię.

Ale white-space: nowrap powoduje, że przeglądarka po prostu ignoruje dyrektywę width i zwiększa szerokość tabeli, aż wszystkie dane mieszczą się w jednej linii.

Co robię źle?

Answer 1

Przepełnienie zadziała tylko wtedy, gdy wie, od czego zacząć, biorąc pod uwagę, że nadleciał. Trzeba ustawić szerokość i wysokość atrybut <td>

Take 2

spróbuj dodać table-layout: fixed; width:500px; do stylu stołu.

UPDATE 3

potwierdził to działało: http://jsfiddle.net/e3Eqn/

Answer 2

Dodaj poniższe linie do arkusza stylów:

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

musisz dodać szerokość tabeli w celu zapewnienia, że ​​następna nieruchomość będzie pasować elementy do określonego rozmiaru. Właściwość layoutu tabeli zmusza przeglądarkę do korzystania z ustalonego układu w obrębie 500 pikseli, które podano.

Answer 3

Dodaj poniższe linie do arkusza stylów:

table { white-space: nowrap; }

Answer 4

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

proste i użyteczne. użyj powyższego kodu dla