CSS - text-wrap

概要

属性名	text-wrap
値	<text-wrap-mode> \|\| <text-wrap-style>
値の詳細	<text-wrap-mode> = wrap \| nowrap <text-wrap-style> = auto \| balance \| pretty \| stable
初期値	wrap
適用可能要素	テキスト
継承	継承する
サポート	https://caniuse.com/mdn-css_properties_text-wrap

説明

テキストの折り返しアルゴリズムを指定します。text-wrap-mode と text-wrap-style をまとめて指定します。

値	説明
wrap	親要素の幅に合わせて折り返します。
nowrap	折り返しません。
auto	折り返しをブラウザにまかせます。
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

リンク

初版：2023年12月3日、最終更新：2025年1月19日

https://www.tohoho-web.com/css/prop/text-wrap.htm

CSS - text-wrap

概要

説明

使用例

関連項目

リンク