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

text-wrap”プロパティ:行の折り返しCSS3で追加

記事Nov. 29th,2020
行の折り返しを指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

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

text-wrap”プロパティは行を折り返すかどうかを指定します。

サンプルコード

p { text-wrap: balance;}

説明
wrap 必要な場合は改行規則に従って行を折り返します (ユーザー・エージェントは改行を挿入する箇所を選択するときに複数の行を考慮することができます。)
nowrap 行の折り返しは行われません (要素に収まらない行ははみ出します。)
balance 【インライン・ボックスの場合】“wrap”の場合と同じ
【ブロック・コンテナの場合】行ごとの長さが等しくなるように改行を挿入して行を折り返します (折り返した結果の行数は“wrap”の場合と同じになります。10行以上を考慮しなければならない場合はユーザー・エージェントは“wrap”とみなすことができます。)
stable 【インライン・ボックスの場合】“wrap”の場合と同じ
【ブロック・コンテナの場合】後続する行にあるコンテンツは改行を挿入する箇所を選ぶ時に考慮しません (テキストの入力中にカーソルが不安定になるのを防ぎます。)
pretty 【インライン・ボックスの場合】“wrap”の場合と同じ
【ブロック・コンテナの場合】描画速度よりもレイアウトを優先して改行を挿入する箇所を選びます (ユーザー・エージェントは改行を挿入する箇所を選択するときに複数の行を考慮します。)
共通キーワード

仕様書

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

定義なし

定義なし

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

定義なし

定義なし

定義あり
nowrap
定義なし

定義なし

定義なし

定義あり
balance
定義なし

定義なし

定義なし

定義あり
stable
定義なし

定義なし

定義なし

定義あり
pretty
定義なし

定義なし

定義なし

定義あり

行の折り返しを許容する

p {
text-wrap: wrap;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p {
text-wrap: balance;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p {
text-wrap: stable;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p {
text-wrap: pretty;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

行の折り返しを禁止する

p {
text-wrap: nowrap;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。

これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

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