Burger mobile menu

Wrap long word (text) in table cell

Piotr Elmanowski | Published: 7 Oct, 2018

Tables in HTML are a quite strange elements. You can set some CSS rules, linke width for columns, and somethimes – nothing happens. This happens especially when in table cell is placed a very long text – the single word (or basically, a long string without spaces).

Here is the live example of this situation, when we have a very long word in table cell and it breaks totally the proportion between columns widths. First and second html table’s column should take 25% of table’s width, third 20%, and the last one – 30%. But this one single word in last column makes it much more longer than 30% of html table width. As the result whole HTML table has wrong column’s widths. Check it below:

HTML:

CSS:

RESULTS:

How to wrap long word (text without spaces) in html table’s cell?

This is very, very easy! We must add only a CSS proprty to table cell “td” tag – “word-break: break-all;” then all column’s widths become as intended.  Check it in example below:

CSS

RESULTS:

Is this a right solution in your opinion? Or do you have another problem? Please, write a comment below 🙂

Tags: , , , , , ,


Scroll top
Loading
Zdjęcie w lewo Zdjęcie w prawo