Search code examples
csspseudo-classcss-hyphens

Weird things with hyphenation

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>

Solution

  • 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>