Home > Enterprise >  CSS: hyphens: auto doesn't work for some words
CSS: hyphens: auto doesn't work for some words

Time:01-18

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