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:
- If the word is not capitalized, hyphenation starts working
- If I change the
lang
attribute fromen
tode
(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