Updated June 3, 2023
Introduction to CSS overflow-wrap
The following article provides an outline for CSS overflow wrap. CSS overflow wrap property helps to wrap up the long words of a sentence within a particular defined limit inside the border area. So that words will not overflow outside the border section by using the overflow wrap property of the CSS. Utilizing its various values of the parameters to get a better design of your HTML UI, which is as per your required design in your project. In this article, we will see the methodologies you can use to limit the text inside a border area of an HTML page by using the CSS overflow wrap property with many examples.
Syntax of CSS overflow-wrap
Given below is the syntax of CSS overflow-wrap:
overflow-wrap: anywhere|initial|break-word|normal|inherit;You might be curious about which are the parameters for the property in CSS overflow wrap? Actually, those are various types of values of overflow wrap which will either prevent or overflow the text inside a border or area.
To get an answer to this, you need to refer to the below table with definitions/ details where the various values of parameters are mentioned.
| Value | Description |
| normal | Words will flow out of their desired borderline. A single word will not break here. The break will occur only when the word finishes and the new word starts. Normal is the default value of the CSS overflow wrap property. |
| break-word | In some cases, you may require that under any circumstances, words within a sentence should not flow out of the border area. In those cases, you should use the CSS overflow wrap property as a “break-word.” To contain the whole sentence inside its border, “break-word” property breaks long words into pieces to fit inside the border. |
| anywhere | When the “anywhere” property is used, words are broken at any random portions so that long words will reside inside within their designated area. It prevents overflow using a random breakdown of words in a sentence. |
| initial | The initial value makes the overflow wrap property which is a default one. |
| inherit | Child element automatically inherits the features from their parent element. |
How overflow-wrap works in CSS?
- We must put the required property of the parameters of CSS overflow wrap utilizing the basic syntax of CSS in HTML to achieve the desired wrap-up of sentences well inside their designated borderline area that ensures no overflow will happen.
- The overflow wrap property is taken from the word-wrap property, which is only designed for the internet explorer browser.
- After that, to make support for all other browsers like Safari, Chrome, Opera, Firefox, etc., an overflow wrap property is introduced in CSS, so use this wrap-up feature.
- In the next section, you can check the examples so that you will know how you will be able to contain words in a sentence inside the borderline by the use of different values of overflow wrap properties in CSS.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.ofw {
margin: 20px 51px 74px 105px;
padding: 10px 10px;
color: black;
background-color: yellow;
font-size: 15px;
width: 35px;
overflow-wrap: break-word; //declaring the overflow wrap property
}
div {
text-align: left;
}
h2 {
color: blue;
}
h2 {
text-align: left;
}
</style>
</head>
<body>
<h2>Demonstration of property of CSS overflow-wrap</h2>
<div class="ofw">
Word will not overflow outside the border area
</div>
</body>
</html>Output:
If you see the above output carefully, you will find that; here, words do not come out of their designated border area as we used the CSS property of overflow wrap as “break-word”.
Example #2
In the second case, you will see another illustration of the overflow wrap property referred to to as “normal”. Words will flow out of the borderline, but it will not be broken in between to keep the continuity of the word intact.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.ofw {
margin: 20px 51px 74px 105px;
padding: 10px 10px;
color: black;
background-color: yellow;
font-size: 15px;
width: 35px;
overflow-wrap: normal;
}
div {
text-align: left;
}
h2 {
color: blue;
}
h2 {
text-align: left;
}
</style>
</head>
<body>
<h2>Demonstration of property of CSS overflow-wrap</h2>
<div class="ofw">
Word will definitely overflow outside the border area
</div>
</body>
</html>Output:
Check out the above output carefully. Here words come out of their designated border area as we used the CSS property of overflow wrap as “normal”. So, in this case, a word is not broken in its middle, rather break will be applied automatically only when a word is finished and a new word is started.
Example #3
In this example, you will go through another illustration of overflow wrap property referred to as “anywhere”.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.ofw {
margin: 20px 51px 74px 105px;
padding: 10px 10px;
color: black;
background-color: yellow;
font-size: 15px;
width: 35px;
overflow-wrap: anywhere;
}
div {
text-align: left;
}
h2 {
color: blue;
}
h2 {
text-align: left;
}
</style>
</head>
<body>
<h2>Demonstration of property of CSS overflow-wrap</h2>
<div class="ofw">
In anywhere property, Word will break anywhere inside the border area
</div>
</body>
</html>Output:
See the above output. Here words are broken at any arbitrary portions so that those will remain inside of their designated border area as we used the CSS property of overflow wrap as “anywhere”.
Conclusion
In this article, we have demonstrated with many examples of the methods you can follow to use the values of overflow wrap property in the CSS code of HTML page.
Recommended Articles
This is a guide to CSS overflow wrap. Here we discuss the introduction to CSS overflow-wrap, how overflow-wrap works along with programming examples. You may also have a look at the following articles to learn more –
