Line break on syllables in CSS

Question

CSS has a word-break property that allows words to be split across lines at certain points (e.g. at the first arbitrary character that extends beyond a desired length). But, to my surprise, there does not seem to be any CSS mechanism (even a poorly supported one) to split words across lines by syllable, as in a traditional printed book:

... the hymn, which Jude repeated under the sway of a poly-
theistic fancy that he would never have thought of...

I realise that
(i) this isn't often necessary on a computer (because we can reflow and justify dynamically), and
(ii) it would require a hyphenation dictionary on the client.
But it might be useful for exceptionally long words (think James Joyce!) or merely to reproduce the style of a printed book; and since we already have spell-check in modern browsers, there's no reason we couldn't do hyphenation.

HTML has a lang attribute so we can generally deduce the intended language; if that dictionary wasn't available, we could "gracefully degrade" and wrap some other way.

So: has syllable breaking ever been seriously considered for CSS? Or has it been rejected? Can we expect to see it implemented in the future?

Answer 1

You're looking for hyphens property. You'll need lang HTML attribute to make it work (as hyphenation is language-based obviously).

The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection when present.

Note: The auto setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the lang HTML attribute to guarantee that automatic hyphenation is applied in that language.

Read more here

p {
  float: left;
  width: 250px;
  margin: auto 20px;
  border: solid 1px;
  hyphens: auto
}

<p>The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection
  when present.</p>

<p lang="en">The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection
  when present.</p>

Also :lang() pseudo-class is kind of related.