[英]Weird things with hyphenation
In Firefox, hyphenation works for both normal text and hyperlinks, for some reason that I don't understand.在 Firefox 中,连字符对普通文本和超链接都有效,出于某种我不明白的原因。
Whereas I expect that since I have :not(a)
pseudo-class, the selector should not affect a
elements, that is, hyperlinks should not be hyphenated.而我希望因为我有
:not(a)
伪类,所以选择器不应该影响a
元素,也就是说,超链接不应该用连字符连接。
In other words, I expect that browser should understand div:not(a)
as "any elements inside divs, except if such an element is a
element".换句话说,我希望浏览器应该将
div:not(a)
理解为“div 中的任何元素,除非这样的元素是a
元素”。 But it seems it doesn't work as I expect it...但它似乎并没有像我预期的那样工作......
Also, a side question.另外,一个附带问题。
Why does neither Chrome/Edge, nor Firefox hyphenation the word incomprehensibility if the first letter is uppercase?如果第一个字母是大写,为什么 Chrome/Edge 和 Firefox 都没有连字符incomprehensibility ?
My code:我的代码:
body { outline: 1px solid red; width: 5em; } div:not(a) { hyphens: auto; } a { overflow-wrap: break-word; word-break: break-word; }
<div> <p lang="en-US"> incomprehensibility incomprehensibility incomprehensibility <a href="https://incomprehensibility.inc/">https://incomprehensibility.inc/</a> incomprehensibility </p> </div>
Simply disable hyphens
on a
a
禁用hyphens
body { outline: 1px solid red; width: 5em; } div { hyphens: auto; } a { hyphens: initial; /* this */ overflow-wrap: break-word; word-break: break-word; }
<div> <p lang="en-US"> incomprehensibility incomprehensibility incomprehensibility <a href="https://incomprehensibility.inc/">https://incomprehensibility.inc/</a> incomprehensibility </p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.