Could someone shed light on why the word "Sustainability" is not being correctly hyphenated in the following code snippet? I have tested it in multiple browsers like Google Chrome, FireFox, and Safari, and none of them seem to hyphenate the word, even though they do so for words like "hyphenated".
Here are my findings so far:
- Hyphenation works if the word is not capitalized.
- Changing the
langattribute fromentode(German) also enables hyphenation, even though the word is in English.
: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>