LoginSignup
3
2

More than 3 years have passed since last update.

【CSS】禁則処理・テキストの折返しと改行やスペースの振る舞いの制御

Posted at

【word-break】テキスト文章内における改行位置を調整

word-breakはテキストの禁則処理についてのプロパティ
そもそも禁則処理ってなんだ → 禁則処理とは

テキストの折返しを制御する。

normal: 英語は単語の切れ目で改行、日本語は表示領域の幅に合わせて改行される。初期値。

break-all: 禁則処理が解除された状態で、全てのテキストが単語に関係なく
表示領域の端に合わせて改行。

keep-all: 英語、日本語全て単語の切れ目で改行。

break-word: 表示領域の幅に影響する場合には、単語の中でも改行される。

【overflow-wrap】単語内での改行の可否を決める

over-wrapは単語内でのテキスト折返しの可否を指定。
表示領域内に収まるよう文章を配置した場合には「break-word」を指定するのがセオリー。

normal: 表示領域を超えても単語の途中では改行させない。

break-word: 表示領域の幅に影響する場合には、単語のなかでも改行される。

anywhere: break-wordと同じく単語の中でも改行されるが、コンテンツ幅に単語内の分割によって折り返されたサイズが考慮される。

【white-space】スペースや改行の表示方法を指定

空白文字(スペースやタグ)や改行(改行文字や改行タグ)にたいして要素内でどのように表示されるか指定。

normal: 連続する改行や空白文字は、1つの改行もしくは空白文字として扱い表示され、表示領域に合わせてテキストを折り返す。

nowrap: 連続する改行や空白文字は、1つの改行もしくは空白文字として表示され、
テキストの折返しをしない。

pre: 連続する改行や空白文字は、そのまま表示され、テキストの折返しをしない。

pre-wrap: 連続する改行や空白文字は、そのまま表示され、表示領域に合わせてテキストを折り返す。

pre-line: 連続する改行は、そのまま表示され、連続する空白文字は1つの空白文字として扱い、表示領域に合わせてテキストを折り返す。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2