【35】改行の禁則処理を解除するか決める word-breakプロパティ
最終更新日：2018年09月25日 （初回投稿日：2018年06月30日）word-breakプロパティは、改行の禁則処理を解除するかどうか決めます。
ブラウザはデフォルトで「改行の禁則処理」を持っています。
英語などの言語では「半角スペース」「ハイフン」「スラッシュ」などの終わりの位置で自然改行するなどの規則です。
word-breakプロパティは、その自然改行の禁則処理を解除することができます。
自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。
<br>で強制改行した場合は、この改行ルールは適用されません。
下のサンプルのように、「word-break: break-all」を指定することで、長い英単語も単語の途中で自然改行できるようになります。
参考：
・CSS Text Module Level 3 | W3C Working Draft
・word-break - CSS | MDN
word-breakプロパティの値
word-breakプロパティの値は、キーワードが3つだけです。
| word-breakプロパティの値 | |
|---|---|
| キーワード | normal がデフォルト値。 break-all、keep-all |
| グローバル値 | word-break: inherit; 親の値を継承（コレ書かなくても継承するけど） word-break: initial; 継承した親の値を解消しデフォルト値に戻す word-break: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作 |
| 値の継承 | あり | 適用できる要素 | すべての要素 |
|---|
それぞれのキーワードは、以下の意味があります。
- normal
- ブラウザのデフォルトの改行の禁則処理に従います。
CJK (中国語、日本語、韓国語) 以外の文字は、「半角スペース」「ハイフン」「スラッシュ」などの終わりの位置で改行します。
日本語などの CJKは場合は1文字ベースで切ります。
（「CJK」についてはすぐ下で解説しています） - break-all
- CJK以外の文字は、改行の禁則処理を解除し、1文字単位で改行します。
CJKはいつもどおり、1文字ベースで改行されます。
（「CJK」についてはすぐ下で解説しています） - keep-all
- CJKの文字の改行を許可しません。
それ以外の言語の文字は normal と同じく改行の禁則処理に従います。
（「CJK」についてはすぐ下で解説しています）
CJK（または CJKV）とは
CJK（Chinese-Japanese-Korean）は 中国語（台湾語も含む）・日本語・韓国語 の文字。
CJKV（Chinese-Japanese-Korean-Vietnamese）は上記にベトナム語も加えたもの。
漢字やカナ、ハングルなどの「マルチバイト言語（2バイト言語）」「縦書き」をするなどの特徴がある言語の「文字」の総称です。
＊「マルチバイト言語（2バイト言語）」については下記に詳細を書いています。
（ちょっとメモ）文字コード、文字集合、エンコードについて（1）
word-breakプロパティの指定サンプル
word-breakプロパティの値をぜんぶ使ってみます。
最後の word-break: keep-all のサンプルでは、日本語だけ枠からはみ出して だ〜っと1行になってますね。「keep-all」は「CJKの文字の改行を許可しない」から。それ以外の言語の文字は「normal」と同じ扱い（=禁則処理あり）です。
サンプルのソースコードはこんなかんじです。
<div style="word-break:normal">
This property specifies ...（長いので省略）
</div>
<div style="word-break:break-all">（テキストは同じです）</div>
<div style="word-break:keep-all">（テキストは同じです）</div>
★注意点です。
●overflow-wrap（word-wrap）:break-word は、オーバーフローするときにだけ改行するので、ブラウザの禁則処理をチャラにはしません。オーバーフローするところ以外は、半角スペースがあればそこで改行するなどの禁則処理は残ります。どうしてもムリなところだけ単語の途中で切ってくれます。
overflow-wrap（word-wrap）プロパティについては、前回の【34】単語の途中で折り返させる overflow-wrap（word-wrap）をご覧ください。
●word-break: break-all は、単語の途中で改行しない禁則処理を解除するので、とにかく1文字単位でぶった切ります。「to」の途中でも「t」と「o」って切っちゃうので要注意。
ただし、日本語などの場合の「行頭の役物」に対する禁則処理には影響しません。（句読点（、。）閉じ括弧（」』）などが文頭に来るような改行はしません）
ちなみに「行頭の役物」に対する禁則処理は、line-breakプロパティで制御します。
word-breakプロパティはこの line-breakプロパティに影響しないってことですね。
line-breakプロパティについては、
【41】句読点などが行頭に来るかどうか決める line-break をご覧ください。
ここで、word-break と line-break の違いについても整理していますので、ぜひ。
word-breakプロパティの使いどころ
日本語の場合は、このプロパティを使って表示が変わるのは「word-break: keep-all」だけ。「改行せずに 1行でだ〜っと表示したい」という機会があれば使えますね。
CJK以外の言語でも、CJKのサイトでも、overflow-wrap（word-wrap）プロパティと同様に URL・メールアドレス・ソースコードなど、途中で切っても意味に影響が無いフレーズが、改行しないとボックスに収まらない時に使うと便利です。
次回予告
さて次回は、hyphensプロパティを使おう。
これは、単語の途中で折り返す時に「ハイフン」をいれるかどうかを指定できます。
手動でソフトハイフン記号「­」を入れて、そこでハイフンを入れて折り返したり、ブラウザにおまかせで 自動的にハイフンを入れて折り返すこともできます。
- 関連記事
-
- 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
- 【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
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
