| 属性名 | 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 と何が変わるのかよく分かりませんでした)。(→ サポート状況) |
.my-box {
width: 280px;
margin-bottom: 1rem;
padding:.3rem;
border:1px solid #ccc;
}
<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>
元々はひとつのプロパティでしたが、auto, wrap と他の値は扱いが異なっているのではとの意見があり、text-wrap-mode と text-wrap-style に分離され、text-wrap はそのショートハンド(一括指定)となりました。