CSS overflow-wrap new property value anywhere usage

1. First, understand the overflow-wrap attribute

The CSS overflow-wrap property is actually the previous word-wrap property. MDN now directly jumps word-wrap documentation page to the overflow-wrap property documentation page.

Since the overflow-wrap property is not supported by IE browsers, and other modern browsers still support the old word-wrap property syntax, there is no reason to use overflow-wrap property.

Until one day overflow-wrap property suddenly supported a new property value, anywhere , and overflow-wrap property had a reason to be used.

The formal syntax of overflow-wrap property is as follows:

overflow-wrap: normal | break-word | anywhere

2. What is the use of anywhere

Before we explain the function of the technical attribute value anywhere , let me first give you a basic understanding of the concepts of "hard line break" and "soft line break".

Hard line breaks insert actual line breaks at the break points of the text, while soft line breaks actually remain on the same line, but appear to be divided into several lines. For example, word-break:break-all makes long English words belong to soft line breaks.

The differences and similarities between anywhere and break-word

In its normal state, anywhere behaves the same as break-word , that is, an otherwise non-breakable string (such as a long word or a URL) can be broken at any point if there are no other acceptable breakpoints in the line, and no hyphen is inserted at the breakpoint.

To put it in layman's terms, if consecutive English characters can be separated without breaking, then do so. If this is not possible, then break them. Therefore, compared to break-all, there may be some blank space left. As shown in the following figure:

For details, please refer to this article: "The difference between word-break:break-all and word-wrap:break-word".

Let's talk about the different supports. The difference between anywhere and break-word is that overflow-wrap:anywhere takes soft line breaks into account when calculating the minimum content size, while overflow-wrap:break-word does not.

For example, the following example:

<p class="anywhere">I'm zhangxinxu.</p>
<p class="break-word">I'm zhangxinxu.</p>
p {
    display: inline-block;
    width: min-content;
    padding: 10px;
    border: solid deepskyblue;
    vertical-align: top;
}
.anywhere {
    overflow-wrap: anywhere;  
}
.break-word {
    overflow-wrap: break-word;
}

The result in the Chrome browser is as follows:

It can be seen that the minimum width of the element declared with overflow-wrap:anywhere is the width after each English word is broken, while the element declared with overflow-wrap:break-word is still calculated according to the default minimum width rule.

As you can see, overflow-wrap:anywhere is like a hybrid of overflow-wrap:break-word and word-break:break-all declarations, and is mainly used in flexible layouts, that is, when the element size is sufficient, the words are displayed as much as possible without interruption, and if the size is not enough, they can be broken.

3. Compatibility and Conclusion

overflow-wrap:anywhere declares that the compatibility is not optimistic at present. Currently (March 2020), Safari browser does not support it, and Chrome browser has just supported it. For specific information, see the table:

Therefore, it is not suitable for use in actual projects at present, so you just need to understand it.

Moreover, this attribute is not used in regular text typesetting. Even if you know the value of this attribute, you will not think of using it.

It is destined to be a forgotten CSS feature in the future.

That’s all I have to say. I’ll give you a brief introduction to a new feature.

Summarize

This is the end of this article about the usage of the new CSS overflow-wrap property value anywhere. For more related CSS overflow-wrap new property value anywhere content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!