When I'm removing all the styles with this CSS code:
* {
all: unset;
display: revert;
}
CSS Hyphens don't affect in Chrome browser. For example:
div {
font-size: 3rem;
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
width: 200px;
background: #ddd;
}
Any way to solve it without deleting the CSS reset code above?
CodePudding user response：
I'm not deeply familiar with the hyphens CSS property, but it seems that it only works when you've specified the language in the DOM using lang=. E.g. <html lang="en">...</html> will allow you to use hyphens anywhere across the document.
In your CodePen example, the lang="en" property is automatically added by CodePen to the <html> attribute.
Now what Chrome seems to do (and Firefox doesn't do) is that it sees the all: unset; property on the HTML attribute and just forgets that lang="en" exists, at least for the purpose of hyphens.
You can confirm this by adding lang attribute to the div directly, and adding all: unset; only on that div, then removing it from the div.
A quick fix here could be to change your CSS reset selector to html * instead of *, i.e. keeping everything inside <html> tag but excluding the <html> tag itself, if you're okay with this compromise:
html * {
all: unset;
display: revert;
}