I have an HTML table cell with a text. The text has long and short words. I need to arrange a text in a way, that long words that do not fit into cell's width are broken, but short words are not broken and just moved to the next line. But when I apply css property "word-break: break-all;" it breaks both long and short words. When I apply "word-wrap: break-word;" property, it for some reason does not break long words and the cell's width stretches automatically.
word-break: break-all Here all words are broken where not necessary, and the text is ugly:
word-wrap: break-word Here nothing is broken, but the cell width is stretched:
I want to have something like this, where only a long word is broken and table cell width stays as it is:
So that only a long word is broken and the width is not changed. How can I do this?