Is it possible to enable auto-hyphenation in HTML/CSS?

html css hyphenation
hanazair picture hanazair · Jan 20, 2012 · Viewed 32.3k times · Source

My client has requested to enable auto-hyphenation on this page: http://carlosdinizart.com/biography/ , and I realized I've never actually seen it done on a web-page.

Is it possible to set up auto-hyphenation in an HTML document with just HTML/CSS? If not - what are the options?

Answer

Ninja picture Ninja · Jan 20, 2012

CSS3 provides some support for this. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ You can check the w3c documentation here: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation

CSS3 adds six properties to the list of useful thing. These are:

  • The most important one is hyphens.
  • You can add dictionary-files with hyphenate-resource so the browser has a better chance to render your text with the right hyphenation.
  • hyphenate-before sets a minimum number of characters before the hyphenation.
  • hyphenate-after does the same as hyphenate-before but for characters after the hyphenation.
  • hyphenate-lines defines about how many lines a hyphenated word is written at a maximum. with hyphenate-character you can specify which HTML-entity should be used, e.g. \2010.

The main property of this stack is hyphens. It accepts one of three values: none, manual or auto. The default one is manual, where you can set hyphens via ­. auto it the better one for continuous text while words get split if possible and available. And none does not hyphenate at all even if there is a character set for a possible line break in a certain word.

Update:

Browser support information here: http://caniuse.com/css-hyphens

Related questions

No line-break after a hyphen

I'm looking to prevent a line break after a hyphen - on a case-by-case basis that is compatible with all browsers. Example: I have this text: 3-3/8" which in HTML is this: 3-3/8” The problem is that near …

Read More
How to hide a soft hyphen (­) in HTML / CSS

I am trying to word-wrap an email address within a div, where otherwise it would overflow because it's too long for the div's width. I know this issue has been covered here before (e.g. this question), but read-on, because …

Read More
How to word-wrap one column in a table, with table sized to browser window

I have a HTML table with 3 'groups' of columns, left, middle and right. +----------------------------------+ | L-1 | L-2 | M | R1 | R2 | +-----+-----+------------+----+----+ | x | z | aaaaaaa... | 1 | 2 | | y | w | bbbbbbb... | 3 | 4 | +-----+-----+------------+----+----+ I would like to confine …

Read More