【35】改行の禁則処理を解除するか決める word-breakプロパティ

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

word-breakプロパティは、改行の禁則処理を解除するかどうか決めます。

ブラウザはデフォルトで「改行の禁則処理」を持っています。
英語などの言語では「半角スペース」「ハイフン」「スラッシュ」などの終わりの位置で改行するなどの規則です。
word-breakプロパティは、その改行の禁則処理を解除することができます。

word-break: 未指定 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.
word-break: break-all ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.
本日のINDEX
  1. word-breakプロパティの値
    1. CJK(または CJKV)とは
  2. word-breakプロパティの指定サンプル
  3. word-breakプロパティの使いどころ

参考:
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: normal This property specifies soft wrap opportunities between letters, i.e. where it is "normal" and permissible to break lines of text. このプロパティは、文字間の自動改行の機会(テキストのどこが改行し得る"正常な位置"なのか)を指定します。
word-break: break-all This property specifies soft wrap opportunities between letters, i.e. where it is "normal" and permissible to break lines of text. このプロパティは、文字間の自動改行の機会(テキストのどこが改行し得る"正常な位置"なのか)を指定します。
word-break: keep-all This property specifies soft wrap opportunities between letters, i.e. where it is "normal" and permissible to break lines of text. このプロパティは、文字間の自動改行の機会(テキストのどこが改行し得る"正常な位置"なのか)を指定します。

最後の 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プロパティについては、近いうちに記事にします。たぶん3回後くらい)

word-breakプロパティの使いどころ

日本語の場合は、このプロパティを使って表示が変わるのは「word-break: keep-all」だけ。「改行せずに 1行でだ〜っと表示したい」という機会があれば使えますね。

CJK以外の言語でも、CJKのサイトでも、overflow-wrap(word-wrap)プロパティと同様に URL・メールアドレス・ソースコードなど、途中で切っても意味に影響が無いフレーズが、改行しないとボックスに収まらない時に使うと便利です。

次回予告

さて次回は、hyphensプロパティを使おう。
これは、単語の途中で折り返す時に「ハイフン」をいれるかどうかを指定できます。
手動でソフトハイフン記号「&shy;」を入れて、そこでハイフンを入れて折り返したり、ブラウザにおまかせで 自動的にハイフンを入れて折り返すこともできます。

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

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

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

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

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この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.