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
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.
- word-break: normal; Default value. Uses default line break rules.
- word-break: break-all; To prevent overflow, word may be broken at any character.
- word-break: keep-all; Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value “normal”.
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.
[wc_row]
[wc_column size=”one-third” position=”first”]
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.
[/wc_column]
[wc_column size=”one-third”]
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.
[/wc_column]
[wc_column size=”one-third” position=”last”]
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.
[/wc_column]
[/wc_row]
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.
- word-break: normal; Default value. Uses default line break rules.
- overflow-break: anywhere; To prevent overflow, word may be broken at any character.
- overflow-wrap: break-word; To prevent overflow, word may be broken at arbitrary points.
- word-wrap: break-word; To prevent overflow, word may be broken at arbitrary points.
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.
[wc_row]
[wc_column size=”one-third” position=”first”]
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.
[/wc_column]
[wc_column size=”one-third”]
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.
[/wc_column]
[wc_column size=”one-third” position=”last”]
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.
[/wc_column]
[/wc_row]
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