【34】単語の途中で折り返させる overflow-wrap(word-wrap)

最終更新日:2018年06月23日  (初回投稿日:2018年06月23日)

overflow-wrapプロパティは、長い単語があって オーバーフローする(ボックスから あふれる=はみ出す)ときに、単語を途中で切るかどうか指定します。

overflow-wrap: 未指定 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.
overflow-wrap: break-word ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.

これは、CSS 2 の word-wrapとまったく同じもの。
word-wrapは もともと IE の独自拡張だったのが、他のブラウザでも実装されたんだそうで、CSS 3 で overflow-wrapプロパティ に改名された後も、word-wrap overflow-wrap の「別名」と見なされて、そのまま使えます
以前作ったサイトで指定していた word-wrap が使えなくなったら大変だもんね。

本日のINDEX
  1. overflow-wrapプロパティの値
  2. overflow-wrapプロパティの指定サンプル
  3. overflow-wrapプロパティの使いどころ

参考:
CSS Text Module Level 3 | W3C Working Draft
overflow-wrap - CSS | MDN

overflow-wrapプロパティの値

overflow-wrapプロパティの値は、たった2つのキーワードでカンタンです。

overflow-wrapプロパティの値
キーワード normal がデフォルト値。
break-word
グローバル値 overflow-wrap: inherit; 親の値を継承(コレ書かなくても継承するけど)
overflow-wrap: initial; 継承した親の値を解消しデフォルト値に戻す
overflow-wrap: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 すべての要素

それぞれのキーワードは、以下の意味があります。

normal
ブラウザの通常の単語の分割位置で改行。
英文などは「半角スペース」「ハイフン」「スラッシュ」などの終わりの位置で改行します。
日本語などの場合は1文字ベースで切ります。
break-word
改行可能な位置がないときだけ、英単語を任意の箇所で切ります。そのとき「ハイフン」は自動で付きません。
(ハイフンを付ける件は hyphensプロパティで詳しくやります)
日本語などの場合は1文字ベースで切ります。

というわけで、日本語などのマルチバイト言語にはまったく関係なし。
英語などの単語専用のプロパティです。

overflow-wrapプロパティの指定サンプル

使ってみます。
比較のために、同じように単語の途中で改行する word-break: break-all も使ってみます。(このプロパティは次回やります)

上から順に
overflow-wrap: normal
overflow-wrap: break-word
word-wrap: break-word(CSS2でのプロパティ名)
word-break: break-all(比較のため。別のプロパティです)

で指定しています。

overflow-wrap: normal This property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow... ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz. このプロパティは、ブラウザがオーバーフローしないように 単語の途中で改行するかどうかを決めます。
overflow-wrap: break-word This property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow... ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz. このプロパティは、ブラウザがオーバーフローしないように単語の途中で改行するかどうかを決めます。
word-wrap:break-word This property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow... ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz. このプロパティは、ブラウザがオーバーフローしないように単語の途中で改行するかどうかを決めます。
word-break: break-all This property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow... ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz. このプロパティは、ブラウザがオーバーフローしないように単語の途中で改行するかどうかを決めます。

最初の overflow-wrap: normal は、長い単語以外は半角スペースで改行しています。
2番目、3番目は同じ結果(同じモノなので)で、長い単語も途中で改行してますね。
最後の word-break: break-all は様子がぜんぜん違うのがわかります。単語の途中だろうとお構いなしに改行してますね。

★注意点です。
overflow-wrap(word-wrap):break-word は、オーバーフローするときにだけ改行するので、ブラウザの禁則処理をチャラにはしません。オーバーフローするところ以外は、半角スペースがあればそこで改行するなどの禁則処理は残ります。どうしてもムリなところだけ単語の途中で切ってくれます。

(ただし自動でハイフンは付きません。ハイフンを付けたいなら hyphensプロパティを使います。これは近い内(次の次くらい)に記事にします。)

word-break:break-all は、単語の途中で改行しない禁則処理を解除するので、とにかく1文字単位でぶった切ります。「to」の途中でも「t」「o」と切っちゃうので要注意。
ただし、日本語などの場合の「行頭の役物」に対する禁則処理には影響しません。(句読点(、。)閉じ括弧(」』)などが行頭に来るような改行はしません)

サンプルのソースコードはこんなかんじです。

<div style="overflow-wrap:normal">
<b>overflow-wrap: normal</b>
This property specifies...(テキスト省略)
</div>

<div style="overflow-wrap:break-word">(テキスト省略)</div>

<div style="word-wrap:break-word">(テキスト省略)</div>

<div style="word-break:break-all">(テキスト省略)</div>

新しいほうの overflow-wrap が認識できない古いブラウザもあるので、超古いブラウザも対象にするなら、昔の名前の word-wrap も併記するほうが良いんだそうです。

p {
    word-wrap:break-word; /*古いほう*/
    overflow-wrap:break-word; /*新しいほう*/
    }

overflow-wrapプロパティの使いどころ

日本語記述には無関係ですが、日本語のサイトでも「メールアドレス」「URL」には便利。
普通はoverflow-wrap を未指定でも、ボックス内に収まらないときは「ハイフン」「スラッシュ」の直後で折り返しますが、それらがちょうどいいところに無くてボックスからはみ出てしまうとき、overflow-wrap: break-word を指定すればOK。

overflow-wrap: 未指定 https://www.abcde_fghijkl_mnopq_rstu_vwxyz_abcde_fghijkl.com
email@abcde_fghijkl_mnopq_rstu_vwxyz_abcde_fghijkl.com
overflow-wrap: break-word https://www.abcde_fghijkl_mnopq_rstu_vwxyz_abcde_fghijkl.com
email@abcde_fghijkl_mnopq_rstu_vwxyz_abcde_fghijkl.com

英語などの言語を使うサイトなら「overflow-wrap: break-word」を使うほうが良いように思いますが、このプロパティは自動で「ハイフン」を付けません

hyphensプロパティはハイフン付きで折り返したりできます。(hyphensプロパティは 近い内(次の次くらい)に記事にします。)

ただし word-wrapプロパティ は 大昔からあるので、使えるブラウザが多いのが強み。
hyphensプロパティは CSS 3 からなので、ちょっと前のブラウザでは使えません。

次回予告

さて次回は、今回もちょっと出てきた word-breakプロパティを使ってみよう。
これは、改行の禁則処理を解除するかどうか決めます。
英単語でも1文字ベースでぶった切って改行できたりします。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.