CSS Overflow-Wrap
FREE
Overview
It's very important to make a responsive site so that it displays correctly on all devices. But sometimes, the words break out of the container on the HTML page. To solve this, you can use text wrap CSS i.e. a CSS property named overflow-wrap is used to wrap the text inside the container. In this article, we'll cover how you can use text wrap CSS to wrap any form of content using the overflow-wrap CSS property.
Syntax
Now, let's look at the syntax of the overflow-wrap CSS property.
Here, as you can see there are various values of the overflow-wrap property in CSS which helps the text to behave differently according to the values given to the HTML element.
Overflow-wrap in CSS
When you need to control the behavior of the texts inside the container i.e. whether the content should overflow or it should fit inside the container, the overflow-wrap CSS property is used. The overflow-wrap CSS property is applied to the inline elements which ensures that the browser should include the line breaks within an unbreakable string.
Consider a container and some text in it. When the word or the actual string is too long to fit inside the box then you can use the overflow-wrap property to force the word to be broken at some point if there are no acceptable break points in the string or the line, so that it can wrap to the next line inside the container.
There are various values according to which overflow-wrap behaves differently. These values to text wrap CSS using the overflow-wrap property are mentioned below:
| Value | Description |
|---|---|
| normal | This is the default value of the overflow-wrap property. The words will overflow out of the parent's border. A single word will not break if this value is given to the overflow-wrap. However, the break will occur when the word finishes and the other word starts. |
| anywhere | The break-word value of the overflow-wrap, text wrap CSS property allows you to break the long word into pieces to fit inside the container. No matter if the text contains the breakable points or not, this value will break the long words anyhow to fit the content inside the container. That means it prevents overflow by the breakdown of long words in a sentence. |
| break-word | This value is the same as the anywhere value in the functionality. If the browser can wrap the overflowing word to its line without overflowing, then it'll wrap the overflowing word. However, after the wrap, if the word still overflows from its container, then the browser will break the word at any arbitrary point to wrap the content inside the border. |
| initial | This value sets the overflow-wrap property to its default value. |
| inherit | The inherit value to the overflow-wrap text wrap CSS property means that the child element automatically inherits the property from its parent element. |
Example
The below-given examples explain how you can use the overflow-wrap text wrap CSS property to avoid the overflowing of the content from the container.
Example:
In this example, we'll see how the content inside the parent container behaves when the overflow-wrap CSS property is set to normal.
Output
As shown in the output, the words are overflowing from the container because the value of the overflow-wrap is set to the normal value. Because of this value, the breaking of the word is applied automatically when a word is finished and a new word is started. So here, the very long word is not broken until it finishes and as soon as the word is completed, the following word moves to the next line.
Example:
In the below example, we'll see how the overflow-wrap text wrap CSS property behaves when the value is set to anywhere.
Output
Example:
In the below example, we'll see the behavior of the break-word value of the overflow-wrap text wrap CSS property.
Output
Note that the output of the overflow-wrap: break-word and the overflow-wrap: anywhere appear the same. The difference between these two can be seen when we calculate the min-content sizes of each container. When the value is set to break-word the browser doesn't consider the breaking of words by soft-wrap opportunities when calculating the min-content sizes but it does consider the soft-wrap opportunities when the value is set to anywhere.
The Historical Word-wrap Property
You can use the overflow-wrap and word-wrap properties to manage the overflowing of the content. The word-wrap text wrap CSS property can be used to specify soft-wrapping of the words i.e. you can use this property to break a word at the exact location where an overflow would occur and it wraps the following word into the following line. Before the introduction of the overflow-wrap CSS property, the word-wrap property was in the use and it also outputs the same results.
The below image shows an example in which the word-wrap CSS property is used which produces the same output as that of the overflow-wrap CSS property.
Output
The word-wrap text wrap CSS property will break the characters or the overflowing words at any place even if placing on its line will not need a word break. However, there are some writing systems like CJK (Chinese, Japanese, Korean) that will not break the word because they have strict word-breaking rules and these are taken into consideration by the browser when the line breaks are created using the word-wrap.
Similarities to the Word-break Property
The similarity of the overflow-wrap text wrap CSS property to the word-break property is that both properties are used to manage the content overflow. The prevention of the overflow is done by breaking the words at any arbitrary points.
Both the properties i.e. overflow-wrap and word-wrap properties behave the same when the values are provided to them. When the value of the overflow-wrap text wrap CSS property is set to the break-word, the words that are large enough to fit inside the container are broken from any arbitrary points. Even if the hyphen property is used, a hyphen character will not be inserted, which has similar results as that of the word-wrap property.
Accessibility Concerns
The overflow-wrap property is a relatively new CSS property as compared to the word-wrap property hence it has limited browser support as of now. You can also use the word-wrap text wrap CSS property if you want your web applications or websites to run on higher versions of browsers.
The word-wrap property was originally a non-standard Microsoft extension and it was implemented by various browsers with the same name. But, this has been renamed to overflow-wrap and word-wrap acts as an alias.
Browser Support
You have to use text wrap CSS using the overflow-wrap property of the CSS and this property is supported by various modern browsers. The overflow-wrap property is supported by the below browsers:
| Browser | Yes / No |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Opera | Yes |
| Safari | Yes |
| Internet Explorer | Yes |
As you know the overflow wrap has different values and these are supported by the browsers mentioned above. However, some of the values of the overflow-wrap CSS property are not supported by the browser and these are mentioned below:
| Browser | overflow-wrap: anywhere; | overflow-wrap: break-word; | overflow-wrap: normal; |
|---|---|---|---|
| Chrome | Yes | Yes | Yes |
| Edge | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes |
| Safari | No | Yes | Yes |
| Internet Explorer | No | Yes | Yes |
| Opera Android | No | Yes | Yes |
| Safari on iOS | No | Yes | Yes |
Conclusion
- The text wrap CSS property, overflow-wrap is used to prevent the overflow of the text from the container.
- The default value of the overflow-wrap property is normal and in such situations, the content will overflow from the container and will not wrap according to the container.
- You can use the word-wrap also if the overflow-wrap is not supported by the latest version of the browser.
- The output of the overflow-wrap: break-word and the overflow-wrap: anywhere appears the same. The difference between these two can be seen when we calculate the min-content sizes of each container.
- When the overflow-wrap: anywhere is used, the browser will break the word only if displaying the word or the content on its line will create an overflow.