【41】句読点などが行頭に来るかどうか決める line-break

最終更新日:2018年09月25日  (初回投稿日:2018年09月25日)

line-breakプロパティは、改行ルール(禁則処理)の厳密さを指定するプロパティ。

「line-break(ライン ブレイク)」とは「改行」の意味です。

このプロパティは CJK(中国語、日本語、ハングル)のみが対象だそうです。

各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。
日本語の場合は、撥音・拗音・促音ん ゃ ゅ ょ っ など)も対象です。

自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。
<br>で強制改行した場合は、この改行ルールは適用されません。

この改行ルールを「ゆるい(loose)」から「厳密(strict)」まで設定できるのが今回の line-breakプロパティです。
改行直後の行頭にくるテキストの制御のためのプロパティってかんじ。

このプロパティは、CSS 2 で IE の独自仕様だったのですが、W3C の CSS 3(Text Module Level 3)で草案に入っています。

完全対応しているブラウザは、IE11, Edge, Chrome, Safari(iOS Safariも)です。
(IE 8 はベンダープレフィックス「-ms-」が要るようですけど、もうこれはいいか)
Android標準ブラウザ・Android Chrome・Android Opera はベンダープレフィックス「-webkit-」が必要。
Firefox だけはなぜか未対応だそうです。(2018年9月記)

本日のINDEX
  1. line-breakプロパティの値
  2. line-breakプロパティの指定サンプル
  3. word-break は line-break に影響を与えない(Firefox以外)
  4. 整理します→ word-break と line-break

参考:
CSS Text Module Level 3 | W3C Working Draft
line-break - CSS | MDN

line-breakプロパティの値

line-breakプロパティの値は キーワードだけです。

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

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

auto
ブラウザにおまかせ。ブラウザデフォルトの改行ルールで改行します。
loose
最もゆるい改行ルールで改行します。短い行(新聞など)で使われるんだそうです。
normal
一般的な改行ルールを使います。
句読点( , . 、。)や 反復記号(々 ゞ )、記号(... .. ・ ;:!? !? ?! ?? !! )が行頭に来ない規則です。
strict
最も厳しい改行ルールを使います。
撥音(ん)、「じゃ」などで使う拗音(ゃ ゅ ょ ぁ ぃ ぅ ぇ ぉ ゎ )、「はっ」などで使う促音( っ )、ハイフン( - = )、長音記号(ー 〜)、閉じ括弧(」』))なども行頭に来ない規則です。
anywhere
改行ルールを無視して、どの文字でも改行します。
*この値は W3Cで「リスクがあり、勧告候補時に削除される可能性がある」とされています。実装しているブラウザも無いようです。

line-breakプロパティの指定サンプル

line-breakプロパティの値をぜんぶ使ってみます。
(未実装のFirefox以外のブラウザで見てください)

<textarea>要素で作っていますので、ボックスの幅を変えて行頭にどんなテキストが来るか確認してみてください。

サンプルの文面がアレですが、auto, loose, normal は同じように表示しますね。
strict は、記号や拗音などが行頭に来ません。

ちなみに、このプロパティに対応していない Firefoxで見ると、すべての値が「strict」の表示でした。まあそれでイイんだけどさ。

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

<textarea rows="8" disabled style="-webkit-line-break:auto; line-break:auto">
【 line-break: auto 】
きゃ.きゅ,きょ々しゃゞしゅ?しょ?じゃ.じゅ,じょ、ちゃ。ちゅ々ちょゞにゃ〜にゅーにょ-ひゃー=
ひゅ?ひょ!みゃ:みゅ;みょ・くゎ...ね!?...んっきゃ.きゅ,きょ々しゃゞしゅ?しょ?じゃ.じゅ,じょ々
ちゃ。ちゅ々ちょゞにゃ〜にゅーにょ!!-ひゃ??ひゅ?ひょ!みゃ:みゅ;みょ・くゎ...ねぇ。
</textarea>
<textarea style="-webkit-line-break:loose;line-break:loose">(テキストは同じです)</textarea>
<textarea style="-webkit-line-break:normal;line-break:normal">(テキストは同じです)</textarea>
<textarea style="-webkit-line-break:strict;line-break:strict">(テキストは同じです)</textarea>
<textarea style="-webkit-line-break:anywhere;line-break:anywhere">(テキストは同じです)</textarea>

word-break は line-break に影響を与えない(Firefox以外)

line-breakプロパティ のほうが word-break: break-all よりも優先。
word-breakline-break に影響を与えないようになっています。

word-breakプロパティも、改行の禁則処理を扱うプロパティ。
word-break: break-all は、CJK以外のテキストを1文字単位で改行させる指定。ただし CJKはもともと1文字単位で改行できるので無関係。
詳しくは、【35】改行の禁則処理を解除するか決める word-breakプロパティ をご覧ください。

同じ文言を word-break:break-all でも指定してみます。
(まずは、できれば Firefox以外で見てください)

サンプルのソースコードです。

<textarea style="word-break:break-all">(テキストは同じです)</textarea>

word-break:break-all の指定も「line-break: auto」と同じようになっています。(行頭に役物や拗音は来ていません)
上のサンプルは line-break を指定していないので、デフォルト値(line-break: auto)になっているんです。この指定が優先されるので、「ょ」や「.」などが行頭に来ないんですね。

約物なども行頭に来ていいくらいの改行をしたければ、 line-break: anywhere を使うんだそうです。 (その anywhere は削除されるかもしれない...んですけどね)

で、ココで一つ問題が!(笑)
line-breakプロパティに未対応の Firefox では、line-breakのデフォルト値が働かないので、word-break :break-all を指定すると、なんでもお構いなしに切ります。
こんなかんじで↓

Firefox だけが他のブラウザと表示が違うので困っちゃいますね。
が、line-breakword-break も正直あんまり使わない(ブラウザデフォルトで十分な場合が多い)ので、まいっかってかんじですかね。

整理します→ word-break と line-break

word-breakline-break、ややこしいので整理してみます。
どっちも自然改行の禁則処理に関するプロパティです。

word-break
CJK以外(英語とか)では「単語の途中で自然改行するかどうか」決める。
CJK(中国語・日本語・ハングル)では「自然改行しないようにするか」を決める。

line-break
CJKだけ。自然改行の行頭に役物や撥音・拗音・促音などが来ないようにする。

ざっくり表にまとめると、こんなかんじ↓

次回予告

さて次回は、hanging-punctuationプロパティを使ってみよう。
これは、句読点の「ぶら下がり」表示をします。「ぶら下がり」とは、ボックスの外側に句読点(, . 、。)や括弧(「( " ' )を出して表示することです。

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

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

関連記事

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

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

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

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2018/10 | 11
- 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.