text-wrap-mode

Baseline 2024
Newly available

Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

text-wrap-mode は CSS プロパティで、要素内のテキストを折り返すかどうかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、text-wrap の一括指定または white-space の一括指定を使って設定したり、リセットしたりすることができます。

メモ: white-space-collapse および text-wrap-mode プロパティは、 white-space 一括指定プロパティを使用して同時に宣言できます。

メモ: このプロパティの名前は、 CSSWG がより良い名前を探すまでのプレースホルダーです。

試してみましょう

構文

css
/* キーワード値 */
text-wrap-mode: wrap;
text-wrap-mode: nowrap;

/* グローバル値 */
text-wrap-mode: inherit;
text-wrap-mode: initial;
text-wrap-mode: revert;
text-wrap-mode: revert-layer;
text-wrap-mode: unset;

値

このプロパティは、強制されないソフトラップの機会で行が折り返されるかどうかを指定します。指定可能な値は次の通りです。

wrap

テキストは適切な文字（例えば英語のように区切り文字を使用する言語では空白文字）で行にまたがって折り返され、オーバーフローを最小限に抑えます。これが既定値です。

nowrap

テキストは行をまたがって折り返されません。改行されるのではなく、格納する要素からはみ出します。

公式定義

初期値wrap
適用対象text and block containers
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

text-wrap-mode = 
  wrap    |
  nowrap

例

折り返すコンテンツ

既定ではコンテンツを折り返す設定になっているので、 text-wrap-mode プロパティは必要ありません。この例では、コンテンツはボックス内に収まるように次の行に流れますが、最後の行は格納するボックスよりも長いのではみ出します。

HTML

html
<div class="box">CSS IS AWESOME</div>

CSS

css
.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: wrap;
}

結果

折り返さないコンテンツ

この例では、コンテンツは text-wrap-mode: nowrap; で折り返さないように特別に指示されているため、コンテンツがボックス内に合わせられ、次の行に流れません。コンテンツを含むボックスよりも長いため、はみ出します。

HTML

html
<div class="box">CSS IS AWESOME</div>

CSS

css
.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: nowrap;
}

結果

仕様書

Specification
CSS Text Module Level 4
# text-wrap-mode

ブラウザーの互換性

BCD tables only load in the browser

関連情報