How to wrap long single words into a new line using CSS?

February 6, 2021 - 1 min read

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 break-word.

/* 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-wrap and 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.

Feel free to share if you found this useful 😃.