このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

line-break”プロパティ:改行規則CSS3で追加

記事Nov. 27th,2020
改行規則の適用方法を指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 line-break: auto;
適用対象 インライン・ボックス
継承 Yes
パーセント値 パーセント値は指定できません
計算値 指定したキーワード
アニメーション 離散

line-break”プロパティはテキストへの改行規則の適用方法を指定するプロパティです。

サンプルコード

p { line-break: loose;}

説明
auto 一行の長さなどから改行規則を自動的に選択する
loose もっとも緩やかな改行規則を適用する (一行の長さが短い場合に有用)
normal 通常の改行規則を適用する
strict もっとも厳密な改行規則を適用する
anywhere どの文字の間でも改行できる (word-break”プロパティによる改行の禁止やその他の改行規則、ハイフネーションは無効です)
共通キーワード

値ごとに適用される規則の詳細についてはユーザー・エージェントに依りますが、仕様書では以下の規則については必須としています。

改行箇所 loose normal strict
小書きの仮名(“ぁ”、“ァ”など)の直前 許容 許容 禁止
音記号(“ー”)の直前 許容 許容 禁止
“〜”、“ ゠”の直前 許容 許容 禁止
漢字や仮名とハイフン(“‐”と“ – ”)の間 許容 禁止 禁止
繰返し記号(“々”、“ゝ”など)の直前 許容 禁止 禁止
連続する“—”、“…”、“‥”の間 許容 禁止 禁止
区切り約物(“!”、“⁈”など)の直前 許容 禁止 禁止
中点類(“・”、“:”、“;”)の直前 許容 禁止 禁止
前置省略記号(“¥”、“#”や“№”など)の直前 許容 禁止 禁止
後置省略記号(“°”、“℃”や“%”など)の直後 許容 禁止 禁止

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
line-break
定義なし

定義なし

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
auto
定義なし

定義なし

定義あり

定義あり
loose
定義なし

定義なし

定義あり

定義あり
normal
定義なし

定義なし

定義あり

定義あり
anywhere
定義なし

定義なし

定義あり

定義あり

使用例

改行規則を自動的に選択

p { line-break: auto;}

This paragraph shows how line breaking works with Cascading Style Sheets.

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

もっとも緩やかな改行規則を適用

p { line-break: loose;}

This paragraph shows how line breaking works with Cascading Style Sheets.

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

通常の改行規則を適用

p { line-break: normal;}

This paragraph shows how line breaking works with Cascading Style Sheets.

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

もっとも厳密な改行規則を適用

p { line-break: strict;}

This paragraph shows how line breaking works with Cascading Style Sheets.

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

改行規則を適用しない

p { line-break: anywhere;}

This paragraph shows how line breaking works with Cascading Style Sheets.

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク