Thursday, March 6, 2014

Difference between word-break: break-all versus word-wrap: break-word

    The 2 CSS properties word-break: break-all and word-wrap: break-word appear to work in the same way or generate the same output, but there is a slight difference between the 2 and we will be discussing these differences today.

    Take a look at the example above. The difference is quite evident, however I will try to explain it further.

word-break: break-all
  • Irrespective of whether it’s a continuous word or many words, break-all breaks them up at the edge of the width limit even within the characters of the same word

word-wrap: break-word
  • This will wrap long words onto the next line.
  • break-word adjusts different words so that they do not break in the middle.

    So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).
    In case you want to explore more text and font related properties, you can head on to this post here. Hope you have liked this article. Do drop a line to let me know if this has helped or if there is any mistake or you would like to suggest anything. Till next time, happy coding.

If this post has helped you, leave a comment or show your love by liking the Spatial Unlimited Facebook page. You could even consider buying me a coffe! Till next time; happy coding!