CODEWITHSUNDEEP
htmlcsshyphenationcss-hyphens
rassoh
rassoh

Reputation: 674

CSS: hyphens: auto doesn't work for some words

Can anyone explain why the following snippet won't correctly hyphenate the word "Sustainability"? I tested this in Google Chrome, FireFox and Safari, none of them hyphenates the word, but all of them correctly hyphenate the word "hyphenated".

My observations so far:

  1. If the word is not capitalized, hyphenation starts working
  2. If I change the lang attribute from en to de (german), it also starts working, although the word is an english word

:root {
  font-size: 20px;
  font-family: system-ui;
  padding: 2rem;
}
body {
  margin: 0;
}
p {
  border: 1px solid;
  width: 100px;
  hyphens: auto;
}
<html lang="en">
  <body>
    <p>The word Sustainability can't be hyphenated, apparently</p>
    <p>Only if written without a capital "S", it starts working: sustainability 🤔</p>
  </body>
</html>

Upvotes: 5

Views: 3926

Answers (3)

loler
loler

Reputation: 2587

This must be an intended behavior due to language rules. At this point, there aren't many hyphenation control mechanisms and browsers are free to decide how to do the hyphenation when hyphens: auto.

As a workaround, you could use soft wrap character like U+00AD or &shy; HTML entity.

Upvotes: 2

entoniperez
entoniperez

Reputation: 584

There is a trick to avoid this behavior with capitalized or uppercase words. You must write the word with lowercase:

<strong>Lorem <span>averyreallylongword</span> ipsum</strong>

And then with CSS you can do this:

strong {hyphens: auto;}
span {text-transform: capitalize;} // same as you say 'Titlecase'

Upvotes: 2

pkExec
pkExec

Reputation: 2086

It's defined in the specs: https://www.w3.org/TR/css-text-3/#hyphenation

"The UA may use language-tailored heuristics to exclude certain words from automatic hyphenation. For example, a UA might try to avoid hyphenation in proper nouns by excluding words matching certain capitalization and punctuation patterns. Such heuristics are not defined by this specification. (Note that such heuristics will need to vary by language: English and German, for example, have very different capitalization conventions.)"

Upvotes: 6

Related Questions