Smarter word break in CSS?

Question

If I just put word-break: break-all on an element, I often end up with this:

Hello people, I am typing a mes
sage that\'s too long to f

Answer 1

For a lot of our projects we usually add this where necessary:

.text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

It handles most odd situations with different browsers.