当我用这个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重置代码?
2条答案
按热度按时间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>
标记本身,如果您同意这种折衷:字符串
Complete example on CodePen的
wztqucjr2#
还有另一种方法可以通过设置HTML根目录的locale来解决这个问题:
字符串
由于某种原因,
revert
和initial
似乎不起作用。