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

■ 概要

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

■ 解説

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

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

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

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

現状では,IE10 などは overflow-wrapプロパティ には未対応のようです。  互換性の観点からは,word-wrapプロパティ を使用して マークアップする方が好ましいと思われます。

■ 使用例( overflow-wrap プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css" media="screen, handheld, print, tv" >
<!--
  div.wwr1 { width:450px; height:220px; background-color:#00BBBB;
                    overflow-wrap: normal;}
  div.wwr2 { width:450px; height:220px; background-color:#00BBBB; 
                    overflow-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.

■ 備考

【参考ページ】