Sometimes, we want to truncate table cells, but fit as much as content possible with CSS.
In this article, we’ll look at how to truncate table cells, but fit as much as content possible with CSS.
How to truncate table cells, but fit as much as content possible with CSS?
To truncate table cells, but fit as much as content possible with CSS, we use the white-space property.
For instance, we write
<table border="1" style="width: 100%">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tr>
<td
style="
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 1px;
"
>
This cell has more content.This cell has more content.This cell has more
content.This cell has more content.This cell has more content.This cell
has more content.
</td>
<td style="white-space: nowrap">Less content here.</td>
</tr>
</table>
to make the content fit on 1 row with white-space: nowrap;.
We hide overflowing content with overflow: hidden;.
And we add an ellipsis after the truncated content with text-overflow: ellipsis;.
Conclusion
To truncate table cells, but fit as much as content possible with CSS, we use the white-space property.
