CSS3: word-wrap プロパティ - 単語の途中で改行するかどうか

■ 概要

項　　目説　　明
記述形式 セレクタ {word-wrap: 値 }
値 の形式 normal，break-word
初 期 値 normal
対応ブラウザー C2+ / e5+ / N?+ / Fx3.5+ / Op10.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 する

■ 解説

word-wrapプロパティ は，単語の途中で改行するかどうかを指定します。

指定できる各値の形式は，以下のとおりです。

値説　　明
normal 単語と単語の間など通常改行が可能な場所でのみ改行します。　（初期値）
ただし，word-break: keep-all の指定はword-break: normal に緩和されます。
break-word 単語の途中で自動改行します。
この改行の際にハイフン"-"は挿入されません。

CSS3 では同機能の overflow-wrapプロパティ が新設される予定ですが， 互換性のために word-wrapプロパティ も残されることになっています。　これはちょうど， overflow-wrapプロパティ を指定するための簡便な記述が word-wrapプロパティ であるというような位置付けです。

■ 使用例（ word-wrap プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
  div.wwr1 { width:450px; height:220px; background-color:#00BBBB;
                    word-wrap: normal;}
  div.wwr2 { width:450px; height:220px; background-color:#00BBBB; 
                    word-wrap: break-word;}
-->
</style>
HTML
<body> ～ </body>		 
<div class="wwr1">
   <b>normal</b><br><br>
      WhenintheCourseofhumanevents,itbecomesnecessaryforonepeopletodissolve 
      thepoliticalbandswhichhaveconnectedthemwithanother,andtoassumeamongthe
      powersoftheearth,theseparateandequalstationtowhichtheLawsofNatureand
      ofNature'sGodentitlethem,adecentrespecttotheopinionsofmankindrequires
      thattheyshoulddeclarethecauseswhichimpelthemtotheseparation.
</div>
<br>
<div class="wwr2">
   <b>数値（長さ）= 1em</b><br><br>
      WhenintheCourseofhumanevents,itbecomesnecessaryforonepeopletodissolve 
      thepoliticalbandswhichhaveconnectedthemwithanother,andtoassumeamongthe
      powersoftheearth,theseparateandequalstationtowhichtheLawsofNatureand
      ofNature'sGodentitlethem,adecentrespecttotheopinionsofmankindrequires
      thattheyshoulddeclarethecauseswhichimpelthemtotheseparation.
</div>

ブラウザー 表示例
normal

WhenintheCourseofhumanevents,itbecomesnecessaryforonepeopletodissolve thepoliticalbandswhichhaveconnectedthemwithanother,andtoassumeamongthe powersoftheearth,theseparateandequalstationtowhichtheLawsofNatureand ofNature'sGodentitlethem,adecentrespecttotheopinionsofmankindrequires thattheyshoulddeclarethecauseswhichimpelthemtotheseparation.

break-word

WhenintheCourseofhumanevents,itbecomesnecessaryforonepeopletodissolve thepoliticalbandswhichhaveconnectedthemwithanother,andtoassumeamongthe powersoftheearth,theseparateandequalstationtowhichtheLawsofNatureand ofNature'sGodentitlethem,adecentrespecttotheopinionsofmankindrequires thattheyshoulddeclarethecauseswhichimpelthemtotheseparation.

■ 備考

【参考ページ】