当我使用CSS连字符后删除所有样式与'all:unset;',CSS连字符在Chrome中不起作用

5t7ly7z5  于 2023-08-08  发布在  其他
关注(0)|答案(2)|浏览(119)

当我用这个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重置代码?

c3frrgcw

c3frrgcw1#

我对hyphens CSS属性不是很熟悉,但它似乎只有在DOM中使用lang=指定语言时才有效。例如,<html lang="en">...</html>将允许您在整个文档的任何地方使用hyphens
CodePen example中,CodePen会自动将lang="en"属性添加到<html>属性中。
现在Chrome似乎做了(Firefox * 没有做)的是,它看到HTML属性上的all: unset;属性,只是忘记了lang="en"的存在,至少是为了连字符的目的。
您可以通过将lang属性直接添加到div中,并仅在该div上添加all: unset;,然后将其从div中删除来确认这一点。
这里的一个快速解决方案是将CSS重置选择器更改为html *而不是*,即将所有内容保留在<html>标记内,但不包括<html>标记本身,如果您同意这种折衷:

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

字符串
Complete example on CodePen

wztqucjr

wztqucjr2#

还有另一种方法可以通过设置HTML根目录的locale来解决这个问题:

:root {
  -webkit-locale: 'en';
}

字符串
由于某种原因,revertinitial似乎不起作用。

相关问题