Why does CSS set word-wrap: break-word; overflow-wrap: break-word;

In CSS, you’ll often see the word-wrap: break-word; and overflow-wrap: break-word; properties. These properties control how text wraps when the content exceeds the width of the container. But why do these two properties exist? Why is it necessary to set them? This article will explain the functions and principles of these two properties in detail from the perspectives of CSS layout, text typesetting, and browser compatibility.

CSS Text Wrapping Issues

In web development, text content is often wrapped in a container, such as a div, span, or p tag. These containers typically have a fixed width. When text content exceeds the container’s width, text overflow occurs.

.container { 
width: 200px; 
} 
.text { 
width: 400px; 
}

<div class="container"> 
<p class="text">This is a long long long long long long long text.</p> 
</div>

In the example above, the width of .text is 400px, exceeding the width of .container by 200px, causing the text to overflow. Typically, browsers use the default line-breaking rule, which is to wrap text at spaces or hyphens. However, sometimes we want text to wrap anywhere, not just at spaces or hyphens. This is where the word-wrap: break-word; and overflow-wrap: break-word; properties come in handy.

word-wrap: break-word;

word-wrap: break-word; property defines how the browser wraps a string when necessary. If a word is too long to wrap, word-wrap: break-word; forces the browser to wrap within the word to avoid overflowing the container. This ensures that the text content does not overflow the container and can be wrapped at any position.

.text {
width: 200px;
word-wrap: break-word;
}

<div class="container"> 
<p class="text">Thisisalonglonglonglonglonglonglonglongtext.</p> 
</div>

In the example above, when the text exceeds the container width, word-wrap: break-word; forces the browser to wrap the text internally, preventing it from overflowing the container. This ensures that the text can wrap at any point, regardless of spaces or hyphens.

overflow-wrap: break-word;

overflow-wrap: break-word; also controls how text wraps, but it differs slightly from word-wrap: break-word;. CSS3 introduced the overflow-wrap property as a replacement for word-wrap, achieving the same effect as word-wrap: break-word; while resolving some compatibility issues. When text exceeds the width of its container, overflow-wrap: break-word; wraps the text within the word, preventing it from overflowing the container.

.text {
width: 200px;
overflow-wrap: break-word;

}

<div class="container">

<p class="text">Thisisalonglonglonglonglonglonglonglongtext.</p>

</div>

Similar to word-wrap: break-word;, the overflow-wrap: break-word; property ensures that text wraps at any position, regardless of spaces or hyphens. Also, because overflow-wrap is a CSS3 property, it’s recommended in some situations.

Browser Compatibility

In actual development, to ensure compatibility across different browsers and versions, we need to set both the word-wrap: break-word; and overflow-wrap: break-word; properties. This ensures that line breaks within text are handled correctly in most modern browsers.

.text { 
width: 200px; 
word-wrap: break-word; 
overflow-wrap: break-word; 
}

In the above code, both the word-wrap: break-word; and overflow-wrap: break-word; properties are set simultaneously, ensuring proper line wrapping of text in most environments. This approach is conservative and compatible with most overflow issues.

Summary

Text wrapping is a common issue in CSS layout. To prevent text from overflowing its container, we can use the word-wrap: break-word; and overflow-wrap: break-word; properties to control text wrapping. These properties allow text to wrap at any position, regardless of spaces or hyphens. Furthermore, to ensure compatibility across different browsers and versions, setting both properties simultaneously ensures proper line wrapping of text. The CSS word-wrap and overflow-wrap properties provide more control over text wrapping, helping us better manage the display of text content.