Weird things with hyphenation

Question

In Firefox, hyphenation works for both normal text and hyperlinks, for some reason that I don't understand.

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.

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". 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?

---

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>

Answer 1

Simply disable hyphens on a

 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>