html

CSS Overflow Wrap

The overflow-wrap attribute in CSS enables users to tell the browser that somehow a piece of content within the specified component can be broken into numerous lines at an ordinarily indestructible location. This prevents a very long text string from producing layout issues due to overflowing. This property can be applied to inline elements and can be used in an external style sheet, outline styling, and inline styling of any HTML file. In this guide, we will be helping you understand the use of the overflow wrap property of CSS styling in HTML to style the “div” sections by using different wrap styles. For this purpose, we suggest you use the Visual Studio Code for HTML scripting.

Example 01: Normal Wrap

In our first example, we will be discussing the use of normal wrap with different writing styles. So, we have been using the Visual Studio Code to create a new HTML file named “test.html” and start the HTML script within it. The HTML code has been started with the main html tag followed by the main head and body tags. Within the body tag, we have been using the first two headings of different sizes. Heading 1 is the largest while heading 2 is the second largest showing that this would be a Normal Wrap.

After this heading, we have been using the “div” tag to create a new section within the main HTML webpage. This “div” tag has been specified with the class “d1” to be differentiated upon styling. We have added a text line or paragraph to it to wrap it in a normal wrap style. This text is simple and it doesn’t contain any long words in it. After this “div” tag, we have been using the second heading of this HTML page to display that the next div text will also be containing a normal wrap. Then, we have a new “div” tag specified by the class “d2” for differentiation in styling.

This “div” section contains a long text or paragraph along with one long word in it so that we can see how a normal overflow-wrap property reacts and style it. After this section, the body has been completed and the body tag will be closed along with the “html” main tag. Within the “head” tag of this HTML code, we have a style tag to style the HTML page. The “div” keyword has been used to style both the “div” sections to 100 pixels with the border of 3 pixels of “blue violet” color for each. The width and border property has been used here for this purpose. After that, both the div sections have been styled separately with the use of their class. We wrapped both in the normal wrap using the property “overflow-wrap”. The styling has been completed. So, the style and head tag is closed here. Our HTML script has been completed and is ready for use. Thus, we have saved it and tried to run it on the VS Code.

We have been using the “Run” menu from the Visual Studio code followed by the “Start Debugging” option. It has asked to select the browser Chrome from the list. We have executed it and have the shown-below output for two “div” sections containing a normal wrap on its text. The first “div” section has been displaying its text in a sorted and normal format because it doesn’t contain a very long word that cannot be fitted in the 100-pixel width.

On the other hand, the second “div” box contains a very long word in its text. Hence, the output is showing that the word crossed the border of the 100-pixel “div” box as the use of normal wrap. This is because normal wrap doesn’t break the word to fit it in the “div” section.

Example 02: Break-word Wrap

In this example, we will be discussing the use of Break-word wrap in comparison with the Normal Wrap. So, we have been using the very same HTML code in the Visual Studio Code tool but with few updates. So, we will be starting its explanation from the “body” tag. We have updated both the “div” tags text data with the long sentence containing one long word in it. The heading 1 would be stated as a normal wrap while the other heading of size 1 is stated as a “Break-word” wrap.

We have updated the “div” section text for both the “div” sections separately. The body is now complete and we will be looking at the styling. The same width and border property have been utilized for both “div” sections and their classes have been used for their separate styling. We have been specifying a normal wrap for the first “div” section while the “break-word” wrap for the second “div” section. We have saved this code.

After running this updated code in the browser, we have the shown-below output. The first “div” section text is crossing its border without breaking a word while the other “div” section text has a long word that has been broken and moved to the next line to fit in the “div” pane. This is done by the use of break-word wrap for styling. 

Example 03: Anywhere Wrap

In this example, we will be explaining the use of the overflow-wrap property to apply the “anywhere” wrap on our “data” and compare it with the break-word wrap. So, within the body tag of our HTML code, we have updated its headings. The first heading of size 1 has been stated as Break-word” wrap while the second heading of the same size is stated as “Anywhere wrap”. Both the “div” tags contain the text of updated long sentence containing at least 1 long word in it. Both the sentences in the “div” tags are separately updated for break-word and anywhere wrap separately.

Within the style tag, we have been again using the 100-pixel width for both the tags containing the border of solid “blue violet” color. After this, we have been using the classes of both tags separately to style them accordingly: d1 and d2. The overflow-wrap property has been used for both “div” separately to style first div with “break-word” wrap and second “div” with the “anywhere” wrap. Let’s save and run this code now.

The output of this updated code has been showing not a minor change in the styling of both the “div” sections. Break-word and anywhere is quite the same.

Conclusion

This is about the styling of different elements of an HTML file with the “overflow-wrap” property to avoid the overflowing of different string texts of any type of element in HTML webpages. We have seen three very simple yet useful HTML examples separately covering the normal wrap, break-word wrap, and the anywhere wrap. Along with that, we have also covered their comparisons.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.