CSS - word-wrap

トップ > CSSリファレンス > word-wrap

概要

属性名 word-wrap
normal | break-word
初期値normal
適用可能要素すべての要素
継承継承する
メディアVisual / Text
サポートe5 / Fx3.5 / Ch1 / Op10.5 / Sa1

説明

英語の単語の途中で表示領域の横幅による自動改行を許可するか否かを指定します。CSS3 では、overflow-wrap と名前を変えて採用が検討されています。

説明
normal英単語の途中では自動改行を許可しません。
break-word英単語の途中でも自動改行を許可します。

使用例

CSS
.sample-normal {
    word-wrap: normal;
    width: 180px;
    margin: 1em;
    border: 1px solid #666666;
}
.sample-break-word {
    word-wrap: break-word;
    width: 180px;
    margin: 1em;
    border: 1px solid #666666;
}
HTML
<h5>normal</h5>
<div class="sample-normal">
  <div>ThisIsAnEnglishSentenceWithoutAnySpace.</div>
  <div>これは空白の無い日本語の文章です。</div>
</div>

<h5>break-word</h5>
<div class="sample-break-word">
  <div>ThisIsAnEnglishSentenceWithoutAnySpace.</div>
  <div>これは空白の無い日本語の文章です。</div>
</div>
表示
normal
ThisIsAnEnglishSentenceWithoutAnySpace.
これは空白の無い日本語の文章です。
break-word
ThisIsAnEnglishSentenceWithoutAnySpace.
これは空白の無い日本語の文章です。

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
http://www.tohoho-web.com/css/prop/word-wrap.htm