What is the difference between word-wrap and overflow-wrap, break-word and break-all?

Need Some Help? We are here for you!

We have a very friendly service - Come and chat to us and let us know what you need, we work for an hourly fee and can also provide you a no obligation quote and begin work immediately in most cases. Click "Request Support" or use our Live Chat.

Request Support

This is a mobile optimized version of this page, view original page.

In CSS there are several methods for deciding how and where words will break or split in an element. Such as the word-wrap property which is used to split/break long words and wrap them into new lines and the overflow-wrap which works similarly but with differences.

In this article you will see visual representations of the differences between these properties and values, to help you decide what is the best method for your usage scenario.

 

Overflow-wrap vs Word-break

Though overflow-wrap and word-break behave similarly there are differences between them. The overflow-wrap property breaks the word if it cannot be placed on the line without overflowing regardless of the language used. The word-break property is used for non-English languages and specifies wraps between letters of languages like Chinese, Japanese, and Korean.

 

Word-break

The word-break property has a few common values listed below, you can see how these effect contained content in our visual examples to help guide you to your wanted result.

As well as Initial for setting the property to it’s default value, and Inherit to inherit the property value from it’s parent element.

word-break:break-all
This is an example of how the css property and corresponding value works, with super-long words such as thisisahugestringoftextthatdoesnthavespaceswhatsoever and thisisasimilarlongwordwhichiknowyourtryingtoread, you can see from this example how the text behaves, where it will break and where it will not break.
word-break:break-word
This is an example of how the css property and corresponding value works, with super-long words such as thisisahugestringoftextthatdoesnthavespaceswhatsoever and thisisasimilarlongwordwhichiknowyourtryingtoread, you can see from this example how the text behaves, where it will break and where it will not break.
word-break:keep-all
This is an example of how the css property and corresponding value works, with super-long words such as thisisahugestringoftextthatdoesnthavespaceswhatsoever and thisisasimilarlongwordwhichiknowyourtryingtoread, you can see from this example how the text behaves, where it will break and where it will not break.

 

Overflow-wrap & word-wrap

The overflow-wrap property has a few common values listed below but generally works very similar to word-wrap, you can see how these effect contained content in our visual examples to help guide you to your wanted result.

As well as Initial for setting the property to it’s default value, and Inherit to inherit the property value from it’s parent element.

overflow-wrap:anywhere
This is an example of how the css property and corresponding value works, with super-long words such as thisisahugestringoftextthatdoesnthavespaceswhatsoever and thisisasimilarlongwordwhichiknowyourtryingtoread, you can see from this example how the text behaves, where it will break and where it will not break.
overflow-wrap:break-word
This is an example of how the css property and corresponding value works, with super-long words such as thisisahugestringoftextthatdoesnthavespaceswhatsoever and thisisasimilarlongwordwhichiknowyourtryingtoread, you can see from this example how the text behaves, where it will break and where it will not break.
word-wrap:break-word
This is an example of how the css property and corresponding value works, with super-long words such as thisisahugestringoftextthatdoesnthavespaceswhatsoever and thisisasimilarlongwordwhichiknowyourtryingtoread, you can see from this example how the text behaves, where it will break and where it will not break.
Need Some Help? We are here for you!

We have a very friendly service - Come and chat to us and let us know what you need, we work for an hourly fee and can also provide you a no obligation quote and begin work immediately in most cases. Click "Request Support" or use our Live Chat.

Request Support

SHARING IS CARING!


Author: Dean WilliamsProfessional PHP Web Developer with expertise in OpenCart Web Development, WordPress Web Development, Bespoke Systems - also a seasoned Linux Server Administrator.