【34】単語の途中で折り返させる overflow-wrap（word-wrap）
最終更新日：2018年06月23日 （初回投稿日：2018年06月23日）overflow-wrapプロパティは、長い単語があって オーバーフローする（ボックスから あふれる=はみ出す）ときに、単語を途中で切るかどうか指定します。
これは、CSS 2 の word-wrapとまったく同じもの。
word-wrapは もともと IE の独自拡張だったのが、他のブラウザでも実装されたんだそうで、CSS 3 で overflow-wrapプロパティ に改名された後も、word-wrap は overflow-wrap の「別名」と見なされて、そのまま使えます。
以前作ったサイトで指定していた word-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 は、長い単語以外は半角スペースで改行しています。
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。
email@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文字ベースでぶった切って改行できたりします。
- 関連記事
-
- 【41】句読点などが行頭に来るかどうか決める line-break
- 【40】文字間の間隔を指定する letter-spacingプロパティ
- 【39】単語間の間隔を指定する word-spacingプロパティ
- 【38】インデント（字下げ）を指定する text-indentプロパティ
- 【37】空白を詰めるかどうか決める white-spaceプロパティ
- 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
- 【35】改行の禁則処理を解除するか決める word-breakプロパティ
- 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
- 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
- 【32】インラインの縦方向の整列を決める vertical-alignプロパティ
- 【31】OpenType機能を直接指定できる font-feature-settings
- 【30-7】ショートハンドプロパティになった font-variant
- 【30-6】漢字や仮名のための font-variant-east-asian
- 【30-5】文字の代替えを指定する font-variant-alternates
- 【30-4】数字の表示方法を指定する font-variant-numeric
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
