Wrap your word around it

You know when you make a nice design, write some text, try it out and everything looks really neat? And then, in the real world, someone uses really long words and everything breaks? Wrapping to the rescue!

p {
  overflow-wrap: break-word;
  word-break: break-all;
}

Do you know the difference between the two? They are similar in many ways, and you can use both of them for line-breaking controls, but using ‘overflow-wrap’ will wrap the entire overflowing word to its own line if it can fit in a single line without overflowing its container. The browser will break the word only if it cannot place it on a new line without overflowing. In my opinion, this one should be a part of your reset CSS.

‘word-break’ will break the overflowing word between two characters even if placing it on a new line would negate the need for a word break. This one can be useful in other cases, for example if you have a long copied and pasted URL. Or if you want to play around with a word and have a narrow parent container, getting every letter stacked under each other.

Same same but different!