Menu
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.
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?
392
There are a few ways to do it with pure CSS. Let's learn how to achieve that. The easiest way to limit text to n lines is to use line-clamp . N can be any positive number, but it will be two or three lines most of the time.
While you can't use CSS alone to do this, you can limit the amount of characters show using CSS as Darren has suggested. You need to set your text container to white-space: no-wrap, text-overflow: ellipsis, and overflow:hidden. Then simply set the size for your container.
The task is to prevent the text in a table cell from wrapping using CSS. To achieve this we use white-space property of CSS. This property forces the contents of th to display in one line. There are many property values exists to the white-space function.
On the Layout tab, in the Cell Size group, click AutoFit. Do one of the following. To adjust column width automatically, click AutoFit Contents. To adjust table width automatically, click AutoFit Window.
Add the following to your stylesheet:
table { white-space: nowrap; }
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
