当我在使用 'all: unset;' 删除所有样式后使用 CSS 连字符时，CSS 连字符不会影响 Chrome

Question

当我使用此 CSS 代码删除所有样式时：

* {
    all: unset;
    display: revert;
}

CSS 连字符在 Chrome 浏览器中不受影响。例如：

div {
  font-size: 3rem;
  
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  
  width: 200px;
  background: #ddd;
}

Demo on CodePen

有什么办法可以在不删除上面的CSS重置代码的情况下解决吗？

Answer 1

我对 hyphens CSS 属性不是很熟悉，但似乎只有当你在 DOM 中指定了语言时它才有效使用 lang=。例如。 <html lang="en">...</html> 将允许您在文档的任何位置使用 hyphens。

在您的 CodePen example 中，CodePen 自动将 lang="en" 属性添加到 <html> 属性。

现在 Chrome 似乎做的（而 Firefox 没有做的）是它看到 all: unset; 属性 HTML 属性，只是忘记了 lang="en" 存在，至少为了连字符的目的。

您可以通过直接向 div 添加 lang 属性来确认这一点，并仅在 div 上添加 all: unset;，然后将其从 [=46] 中删除=].

此处的一个快速修复可能是将 CSS 重置选择器更改为 html * 而不是 *，即将所有内容保留在 <html> 标签内但不包括 <html> 标记本身，如果您同意这种妥协：

html * {
    all: unset;
    display: revert;
}

Complete example on CodePen

当我在使用 'all: unset;' 删除所有样式后使用 CSS 连字符时，CSS 连字符不会影响 Chrome

When I'm using CSS hyphens after remove all style with 'all: unset;', CSS hyphens doesn't affect in Chrome

css

google-chrome