hyphens CSS3

hyphens は、単語を「-」(ハイフン)で分割させるときに使用します。ハイフネーション。

Value（値）

none: 分割しない
manual: 「」で示した箇所を分割します。初期値
auto: ブラウザに依存。

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { hyphens: none; }
   p.test2 { hyphens: manual; }
   p.test3 { hyphens: auto; }
  </style>
 </head>
 <body>
   <p class="test1">
    Happiness does not lie in happine&shy;ss, but in the ach&shy;ievement of it.
   </p>
   <p class="test2">（同上）</p>
   <p class="test3">（同上）</p>
 </body>
</html>

display

Happiness does not lie in happiness, but in the achievement of it.

※ 未対応のブラウザでは正しく表示されません。
※ グレーボックスは横幅width:200pxを指定しています。
※ CSSソースにベンダープレフィックス「-webkit-」「-moz-」「-ms-」を付けてます。