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

word-break”プロパティ:単語途中での改行CSS3で追加

記事Nov. 27th,2020
単語途中での改行を許可するかどうかを指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

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

word-break”プロパティは単語途中での改行を行うかを指定するプロパティです。

サンプルコード

p { word-break: break-all;}

説明
normal 改行規則に従う
break-all 単語途中での改行を許容する (ハイフネーションはされません。)
keep-all 単語途中での改行を禁止する (数字、アルファベット、漢字、仮名などの字間の改行を禁止します。“anywhere”以外のline-break”プロパティの指定を無視します。)
共通キーワード

過去に定義されていたブラウザの独自実装との互換性を考慮して非推奨の値として“word-break: break-word;”が定義されており、“word-break: normal; overflow-wrap: anywhere;”と同じ意味になります。なお、この値を指定するとoverflow-wrap”プロパティはその値にかかわらず無視されます。

仕様書

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

定義なし

定義あり

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

定義なし

定義あり

定義あり
break-all
定義なし

定義なし

定義あり

定義あり
keep-all
定義なし

定義なし

定義あり

定義あり
break-word
定義なし

定義なし

非推奨

非推奨

改行規則に従う

p { word-break: normal;}

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

彼女は「春はあけぼの。」と記しているが、これはSpringはMorningが一番良い時間であるということを言っているのである。

単語途中での改行を許容

p { word-break: break-all;}

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

彼女は「春はあけぼの。」と記しているが、これはSpringはMorningが一番良い時間であるということを言っているのである。

単語途中での改行を禁止

p { word-break: keep-all;}

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

彼女は「春はあけぼの。」と記しているが、これはSpringはMorningが一番良い時間であるということを言っているのである。

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