Replace `break-all` with `hyphenation` mixin

The `word-break: break-all` css caused words to be cut in half for
breaking the line. I did some research and found that the `hyphenation`
is more what we need.

The `hyphenation` Compass mixin is inspired by this post:
http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/