CSS overflow wrap new property value anywhere usage

Time:2020-5-19

1、 First, understand the overflow wrap attribute

CSS overflow-wrapAttribute is actually the formerword-wrapProperty, MDN now directlyword-wrapJump tooverflow-wrapProperty.

becauseoverflow-wrapProperty IE browser does not support, while other modern browsers still support the oldword-wrapAttribute syntax, so there is no reason to useoverflow-wrapProperty.

Until one dayoverflow-wrapProperty suddenly supports a new property valueanywhereoverflow-wrapProperties have a reason to use them.

overflow-wrapThe formal syntax for attributes is as follows:

overflow-wrap: normal | break-word | anywhere

2、 What’s the use of anywhere

Expand technical property values inanywhereBefore the role, we first give you a concept of popular science, about “hard line breaking” and “soft line breaking”.

Hard wrap inserts the actual line break at the line break point of the text, while soft wrap text is still on the same line, but it looks like it’s divided into several lines, such asword-break:break-allLet long English words belong to soft newline.

Similarities and differences between anywhere and break word

In normal condition,anywhereandbreak-wordIf there is no other acceptable breakpoint in the line, you can disconnect the non breakable string (such as long word or URL) at any point, and do not insert a hyphen at the breakpoint.

In human language, continuous English characters are broken if they can be used without breaking. If they can’t be used, they will be broken. Therefore, compared with break all, they may be left blank. As shown in the figure below:

For details, please refer to this article: “word- break:break-all And word- wrap:break-word The difference “.

Let’s talk about different support,anywhereandbreak-wordThe difference is that inoverflow-wrap:anywhereSoft wrap is considered when calculating the minimum content size, andoverflow-wrap:break-wordSoft wrap will not be considered.

For 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 Chrome is as follows:

As you can see, theoverflow-wrap:anywhereThe minimum width of the declared element is the width after each English word is broken, and theoverflow-wrap:break-wordThe declared elements are still calculated according to the default minimum width rule.

This is visible,overflow-wrap:anywhereIt’s likeoverflow-wrap:break-wordandword-break:break-allThe declared mixture is mainly used in the elastic layout, that is, when the element size is enough, the words will be displayed as much as possible without any interruption. If the size is not enough, the words will be broken.

3、 Compatibility and conclusion

overflow-wrap:anywhereStatement: at present, compatibility is not optimistic. At present (March 2020), Safari browser is not supported, and Chrome browser is just supported. See table for details:

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

In addition, you will not use this property in normal text layout, even if you know the value of this property, you will not think of using it.

Destined to be a forgotten CSS feature in the future.

That’s all. Let’s take a look at a new feature.

summary

This is the introduction of this article about the usage of CSS overflow wrap new property value anywhere. For more information about CSS overflow wrap new property value anywhere, please search previous articles of developer or continue to browse the following articles. I hope you can support developer in the future!