How to wrap long single words into a new line using CSS?
Published February 6, 2021
To wrap single long words into a new line using pure CSS, you can use a property called
overflow-wrap and set its value to
/* Wrap long word into newline */ overflow-wrap: break-word;
To make it work with the majority of browsers in the market we can use a combination of properties such as
word-break like this,
/* Wrap long word into new line to support on all browsers */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word;
That's it! 🌟
See the above code running live in JSBin.