CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



overflow-wrap

CSS is a powerful tool for web developers to create visually appealing and functional websites. One of the many properties available in CSS is the overflow-wrap property. In this article, we will explore what overflow-wrap is, how it works, and how it can be used in web development.

What is Overflow-wrap?

Overflow-wrap is a CSS property that controls how long words and strings of text are handled when they exceed the width of their container. When text is too long to fit within its container, it can either overflow outside of the container or be wrapped onto the next line. The overflow-wrap property determines how this wrapping behavior occurs.

Overflow-wrap is also known as word-wrap, but the word-wrap property has been deprecated in favor of overflow-wrap. The two properties are functionally equivalent, but overflow-wrap is the preferred property to use in modern web development.

How Does Overflow-wrap Work?

The overflow-wrap property has two possible values: normal and break-word. The default value is normal, which allows long words to overflow outside of their container. The break-word value, on the other hand, forces long words to be broken and wrapped onto the next line.

When the overflow-wrap property is set to break-word, the browser will break long words at any point in the word, even if it is in the middle of a character. This can result in uneven word spacing and may not be visually appealing in all cases. However, it can be useful in situations where it is more important to ensure that all text fits within its container, even if it means breaking words in unusual ways.

Code Examples

Let's take a look at some code examples to see how overflow-wrap can be used in web development:

<div style="width: 200px; overflow-wrap: break-word;">
  This is a very long word that will be broken onto the next line if it exceeds the width of its container.
</div>

In this example, we have a div element with a width of 200 pixels and the overflow-wrap property set to break-word. If the text within the div is too long to fit within its container, it will be broken and wrapped onto the next line.

<p style="width: 200px; overflow-wrap: normal;">
  This is a very long word that will overflow outside of its container if it exceeds the width of the container.
</p>

In this example, we have a p element with a width of 200 pixels and the overflow-wrap property set to normal. If the text within the p element is too long to fit within its container, it will overflow outside of the container.

Conclusion

Overflow-wrap is a useful CSS property for controlling how long words and strings of text are handled when they exceed the width of their container. By setting the overflow-wrap property to break-word, web developers can ensure that all text fits within its container, even if it means breaking words in unusual ways. However, it is important to consider the visual impact of breaking words in this way and to use the property judiciously.

References

Activity