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

Question

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.

Answer 1

To deal with one page that has fixed width for text, the practical move would be to add a couple of SOFT HYPHEN characters (U+00AD), using the entity reference ­ if you find it more comfortable than entering the (invisible) character itself. You can rather quickly find out which words need to be hyphenated to produce a good result.

In a more complex case (several pages, flexible width), use a preprocessor, or server-side code, or client-side code that adds soft hyphens. The client-side approach is simplest and can be applied independently of server-side technologies and authoring tools. Beware that automatic hyphenation may go wrong and needs some help: the language(s) of the text need to be indicated in markup (or otherwise, depending on the library used).

At the minimum, you could just put the attributes lang=en class=hyphenate into the tag and the following code in the head part:

Demo: http://bytelevelbooks.com/code/javascript/hyphenation.html (flexible-width text, with just maximum width set, so you can test it varying the browser window width).