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.