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
関連項目
元々はひとつのプロパティでしたが、auto
, wrap
と他の値は扱いが異なっているのではとの意見があり、text-wrap-mode
と text-wrap-style
に分離され、text-wrap
はそのショートハンド(一括指定)となりました。
リンク
- https://drafts.csswg.org/css-text-4/#text-wrap-shorthand
- https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap
- https://caniuse.com/mdn-css_properties_text-wrap
Copyright (C) 2023-2025 杜甫々
初版:2023年12月3日、最終更新:2025年1月19日
https://www.tohoho-web.com/css/prop/text-wrap.htm