5

What is wrong with this code that hyphenations don't work for lang="en"?

h1 {
  font-size: 2em;
  hyphens: auto;
}

div {
  max-width:200px;
  background: aqua;
}
<div>
  <h1 lang="en">Kindofverylongheadlineevenbiggerthanimagined</h1>
  <h1 lang="en">Internationalization</h1>
  <h1 lang="de">Kindofverylongheadlineevenbiggerthanimagined</h1>
</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Maximilian Köhler
  • 401
  • 4
  • 11
  • Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) – Rob Moll Oct 12 '21 at 19:14
  • If look at [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) it says a couple of things: 1. `You must specify a language using the lang HTML attribute to guarantee that automatic hyphenation is applied in that language.` 2. `browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available` 3. It is possible that you are setting correct bounds for your text container. – Lae Oct 12 '21 at 19:15
  • Note all the notes regarding browser support on [caniuse.com's support listing for the property](https://caniuse.com/css-hyphens). – Heretic Monkey Oct 12 '21 at 19:19
  • @Lae please don't use code formatting for emphasis or quoting. Use it for code. – Heretic Monkey Oct 12 '21 at 19:20
  • 3
    Wondering why I see the German text hyphenated but not the English – j08691 Oct 12 '21 at 19:21
  • Was just noticing that. – wazz Oct 12 '21 at 19:22
  • [Duplicate?](https://stackoverflow.com/questions/45319971/why-hyphens-dont-work-with-inner-span) – Rob Moll Oct 12 '21 at 19:24
  • Does this answer your question? [Why hyphens don't work with inner ?](https://stackoverflow.com/questions/45319971/why-hyphens-dont-work-with-inner-span) – wazz Oct 12 '21 at 19:29
  • I voted duplicate and tried some of the answers there, but they didn't then, and still don't seem to fix the problem. Win/Firefox and Chrome. – wazz Oct 12 '21 at 19:30

0 Answers0