カテゴリー

キーワード

 
> 【CSS3】word-wrap:break-wor...

【CSS3】word-wrap:break-wordとword-break:break-allの違いを説明します


2015 年 5 月 29 日 投稿    view: 20255
タグ:
このエントリーをはてなブックマークに追加

CSS word-wrap word-break

こんにちは、WEBマーケティング部の杉尾です。


今回は枠内で文章(単語)の折り返しを指定するプロパティword-wrap と word-breakの使い分けを紹介します。



文章の折り返しを指定する

文字、文章の折り返しの指定をするプロパティはword-wrap と word-breakで、それらに値もいくつかありますが、現実に使用頻度が高いのは2つだけだと思います。


それが、『word-wrap:break-word;』と『word-break:break-all;』です。


word-wrap と word-breakとは

どちらもCSS3のTextモジュールに属するプロパティです。


紛らわしい2つのプロパティですが、違いはというと、

word-wrap …… 単語の途中で改行するかどうかを指定する
word-break …… 行の改行方法を指定する

ということです。


word-wrap で気をつけたいこと

CSS3ではoverflow-wrapと名前を変えて採用が検討されています。

ですが、互換性のために従来使用されてきたword-wrapプロパティも残されることになるようです。


位置づけとしては、overflow-wrapプロパティを指定するための簡便な記述がword-wrapプロパティであるということのようです。

IE10がoverflow-wrapプロパティに未対応のようですので、両方書いておくのが無難でしょう。


word-breakで気をつけたいこと

word-wrapの方はわかりやすいのですが、word-breakは一目で説明の意味がわかりにくいかもしれません。

というのも、word-breakは指定対象の言語によって同じ指定でも表示が変わってくるからです。


たとえば、下記で説明する『word-break:break-all;』というプロパティとその値ですが、これは、『CJK統合漢字は緩やかな改行制限で、非CJKはどこでも改行できる』というものです。

CJK統合漢字とは、中国語、日本語、朝鮮語のことで、要するに漢字を使う言語をひとまとめにしたものです。非CJKはそれ以外の言語ですね。


つまり、『word-break:break-all;』は、よりくだけた表現をすると、「日本語(と漢字圏の言語)の改行を厳しく制限しない(つまり、改行する)。それ以外の言語はどこでも改行する」という指定になります。


検証

結論から先に言うと、現状、実用的に使えるのは、改行ポイントがある場合、英語の単語の途中で折り返さない『word-wrap:break-word;』です。

これに『overflow-wrap:break-word;』を一緒に書いておけば、大丈夫です。


以下、実例も交えつつ説明します。


まず、今回はこういう参考ソースを使いました。


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>word-break | word-wrap</title>
</head>
<body>
    <p class="test">
    
        HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。現在は、WHATWG により仕様が作られ、それを元に W3C により勧告が行われるという流れになっている。W3C は、XML ベースの規格である XHTML の勧告も行っている。<br>
        777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        This module describes the typesetting controls of CSS; that is, the features of CSS that control the translation of source text to formatted, line-wrapped text. Various CSS properties provide control over case transformation, white space collapsing, text wrapping, line breaking rules and hyphenation, alignment and justification, spacing, and indentation.
    </p>
</body>
</html>

上から『日本語文章』、『数字の連続した羅列』、『アルファベットの連続した羅列』、『英語の文章』です。


これに対して、CSSでそれぞれの折り返し指定をしてみます。


共通のCSSは


CSS

.test {
    width:500px;
    height:auto;
    border:1px solid red;
}

です。


そして、これらのソースコードを

Chrome 43.0.2357.81 m (64-bit) 
IE 11.0.9600.17690
Firefox 38.0.1

というモダンブラウザで動作を確認しました。
(記事執筆時点、2015年5月29日での最新ブラウザ)


それぞれどうなったか画面キャプチャでご覧ください。

見づらいかもしれませんのでどういう結果になったか解説も加えます。


折り返し指定しない場合

画像は上からChrome,IE,Firefoxの順です。


折り返し指定なし Chrome

折り返し指定なし IE

折り返し指定なし Firefox


まず折り返し指定をしない場合、どのブラウザも英単語の途中で折り返すことはしていません。
日本語は単語の途中でも折り返しています。
英数字の羅列は改行ポイントがないせいか、折り返さず突き抜けています。


word-wrap:break-word;を指定した場合

画像は上からChrome,IE,Firefoxの順です。


word-wrap:break-word;を指定 Chrome

word-wrap:break-word;を指定 IE

word-wrap:break-word;を指定 Firefox


『word-wrap:break-word;』を指定した場合、文中の英単語の途中で折り返しはしていません。
日本語は単語の途中でも折り返しています。



『word-wrap:break-word;』は「行の中に他の改行ポイントが無い場合には、単語途中でも改行する」という表示方法ですのでその通りの動きですね。



そして、ここがポイントですが、英数字の連続した羅列も枠内で折り返します。
改行ポイントがないから単語の途中でも折り返しをしているという状態です。


word-break:break-all;を指定した場合

画像は上からChrome,IE,Firefoxの順です。


word-break:break-all;を指定 Chrome

word-break:break-all;を指定 IE

word-break:break-all;を指定 Firefox


『word-break:break-all;』です。
これは「日本語も英語も単語の途中で折り返す」という指定のはずですが、IEだけは英単語の途中で折り返さず、改行ポイントで折り返しています。


これはブラウザの独自解釈のようです。


結果

前項の冒頭で申し上げたように、文章を枠内に収めたいときは『word-wrap:break-word;』を使うのが良いと思います。


ですので、CSS3で制式採用されそうなoverflow-wrapをつけて、


CSS

.foo {
    word-wrap:break-word;
    overflow-wrap:break-word;
}

と書きましょう。


『word-break:break-all』は、改行ポイントを無視して単語の途中でも折り返すので、文章が非常に読みづらくなります。


これの使いどころとしては、URLの文字列が長いので折り返したいというようなとき、といった限定的な使い方になると思います。


ですから、そういう強制的に折り返したいものが含まれる<p>~</p>や<div>~</div>などに指定するべきです。


それに対して、『word-wrap:break-word;』は改行ポイントを見極めて折り返しをしてくれますので、読みづらくなることはありません。


その他に気をつけたい値

その他の値でブラウザ間に違いがありましたので紹介します。


word-break:keep-all;』です。


この値は日本語を改行せず、英語は改行ポイントで改行されるはずですが、Chromeでは日本語も枠内に収まるよう改行されています。

これはブラウザ独自の解釈ではないかと思います。


画像は上からChrome,IE,Firefoxの順です。


word-break:keep-all;を指定 Chrome

word-break:keep-all;を指定 IE

word-break:keep-all;を指定 Firefox


まとめ

『word-wrap:break-word;』と『word-break:break-all;』を実例を挙げて紹介しました。


似て非なるものですので、使い分けしてください。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事