Web Design. Web Development. Web Hosting.
0 items

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

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”]

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.

[/wc_column]

[wc_column size=”one-third”]

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.

[/wc_column]

[wc_column size=”one-third” position=”last”]

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.

[/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”]

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.

[/wc_column]

[wc_column size=”one-third”]

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.

[/wc_column]

[wc_column size=”one-third” position=”last”]

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.

[/wc_column]

[/wc_row]

0 0 votes
Article Rating
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
Author: Dean WilliamsProfessional PHP Web Developer with expertise in OpenCart Web Development, WordPress Web Development, Bespoke Systems - also a seasoned Linux Server Administrator.


Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments


Share this page..

Let's begin your journey...

Get in touch us now to begin your journey to having a beautifully crafted mobile responsive website. If you're still unsure what we could do for you then take a look at our why us page which includes reviews, or take a look at our portfolio.

We can work on improving existing websites or craft a new stylish website making your business stand out.

You could always catch us by email, telephone, Skype or live chat to us below.


    0
    Would love your thoughts, please comment.x
    ()
    x