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-modeCSS プロパティで、要素内のテキストを折り返すかどうかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-wrap-mode
nowrap
wrap

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報