長い単語の改行ルールを指定するには?
要素書式
word-wrap : 【単語の改行方法の指定】 ;
対応ブラウザ
値一覧
| 値 | 内容 |
| normal | 通常の改行位置でのみ自動改行する。単語の途中では自動改行しない（既定値）。 |
| break-word | そうしなければ単語がボックスからはみ出すような場合は、単語の途中でも自動改行する。 |
解説文
英語などの分かち書きをする言語では、単語の途中では改行しないのが一般的なルールとなっています。HTMLでも、ボックスの幅がその単語を最後まで表示するのに足りない場合でも、既定では単語の途中では自動改行は行われません。
（なお、日本語のように、分かち書きをしない言語ではこのルールは適用されません）
word-wrapプロパティを使うと、このような場合の挙動を指定することができます。値「normal」は既定の挙動で、単語の途中では自動改行しません。値「word-break」を指定すると、ほかに適切な改行可能な位置がなく、単語がボックスの幅からはみ出すような場合には、単語の途中で改行して、ボックス内に収めます。
なお、折り返し方法を指定するtext-wrapプロパティがブラウザでサポートされ、かつ、その値として、「none」（自動改行しない）や「unrestricted」（単語の途中に限らず、まったく改行の制限を行わない）が指定されていた場合は、その指定が優先され、word-wrapプロパティの指定は有効になりません。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
float:left;
width:70px;
margin-left:100px;
border:solid 1px silver;
}
#box1 {
word-wrap:normal; /* 単語中の改行なし */
}
#box2 {
word-wrap:break-word; /* 単語中の改行あり */
}
</style>
</head>
<body>
<p id="box1" class="box">単語中の改行なし。<br><br>
thisislongwordfortest Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac massa risus, sit amet commodo metus.
Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis.
Morbi quis libero id nulla lacinia placerat. </p>
<p id="box2" class="box">単語中の改行あり。<br><br>
thisislongwordfortest Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac massa risus, sit amet commodo metus.
Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis.
Morbi quis libero id nulla lacinia placerat. </p>
</body>
</html>
関連項目
（関連項目はありません）
