Hyphens

How to split words to improve the layout of paragraphs when line-wrapping.

Syntax
      hyphens: none | manual | auto  | inherit ;

none - Lines will only wrap at whitespace, words are never broken at line breaks.

manual - Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See Suggesting line break opportunities for details.

auto - The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, should be preferred over automatically selecting break points whenever possible. The auto setting's behavior depends on the language being properly tagged (via HTML lang) so that the appropriate hyphenation rules can be selected.

inherit - inherit from the parent element.

Suggested line breaks

Two Unicode characters can be used to manually specify potential line break points within text:

U+2010 (HYPHEN) The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.

U+00AD (SHY) An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

Examples:
h1 { hyphens: none; }
.emw3class { hyphens: manual; }
#emw3id { hyphens: auto; }

Try it:

(CSS 3) Browser Support: None. Use the equivalent -moz-hyphens for Firefox and -ie-hyphens for IE 10.

“if you don’t know where you are going, any road will take you there” ~ George Harrison

Related:

padding-bottom - Bottom padding of an element.
padding-right - Right padding of an element.
padding-top - Top padding of an element.
padding - Shorthand to set all the padding properties.