Breaking Long Words With CSS

Overflowing text can be annoying. If you do a quick research on how to wrap the  overflowing text, you might run into the CSS properties word-wrap, word-break, and overflow-wrap. You might be wondering which one to use. Here's some helpful information.

The Problem

Solution

<div class="text-container" style="width: 500px">
   Lorem ipsum....
</div>

.text-container{
  word-wrap: break-word;
  overflow-wrap: break-word;
}

The trick is to use both word-wrap and overflow-wrap. Overflow-wrap is a modern CSS3 implementation of word-wrap. Including word wrap will make it work for the older browsers. Incase its not working try giving your container a fixed width. word-break with a value of break-all will work too but it breaks the strings in the middle without making an effort to break them at the right points.