CSS - text-wrap

概要

属性名 text-wrap
値 auto | wrap | nowrap | balance | pretty | stable
初期値wrap
適用可能要素テキスト
継承継承する
サポートhttps://caniuse.com/?search=text-wrap

説明

テキストの折り返しアルゴリズムを指定します。

値説明
auto折り返しをブラウザにまかせます。
wrap親要素の幅に合わせて折り返します。
nowrap折り返しません。
balanceすべての行の横幅が同程度になるように折り返します。
pretty表示速度よりもレイアウトを優先するように指示します。具体的には、最後の行に単語がひとつだけ表示されて寂しくなる場合に、複数の単語が表示されるようバランシングしたりなどの調整が行われます。(→ サポート状況)
stableテキストを編集する際、入力文字によって前の行の改行位置が変動しなように、前の行の改行位置を安定させます(※wrap と何が変わるのかよく分かりませんでした)。(→ サポート状況)

使用例

CSS
.my-box {
   width: 280px;
   margin-bottom: 1rem;
   padding:.3rem;
   border:1px solid #ccc;
}
HTML
<h3>wrap</h3>
<div class="my-box" style="text-wrap: wrap;">
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
</div>

<h3>nowrap</h3>
<div class="my-box" style="text-wrap: nowrap;">
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
</div>

<h3>balance</h3>
<div class="my-box" style="text-wrap: balance;">
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
</div>

<h3>stable</h3>
<div class="my-box" style="text-wrap: stable;">
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
</div>

<h3>pretty</h3>
<div class="my-box" style="text-wrap: pretty;">
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
</div>

<h3>stable</h3>
<textarea class="my-box" style="text-wrap: stable; height:6rem;">
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
</textarea>
表示
wrap
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
nowrap
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
balance
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
pretty
A long, long time ago an old man and an old woman lived. One day the old man went to the mountains to cut grass.
stable
Copyright (C) 2023-2025 杜甫々
初版：2023年12月3日、最終更新：2025年1月12日
https://www.tohoho-web.com/css/prop/text-wrap.htm