CSS - text-wrap

トップ > CSSリファレンス > text-wrap

概要

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

説明

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

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

使用例

HTML
<div style="width:200px; border:1px solid #ccc; margin-bottom: 1rem;">
Long, long ago there lived, an old man and an old woman...
</div>

<div style="<em>text-wrap:wrap</em>; width:200px; border:1px solid #ccc; margin-bottom: 1rem;">
Long, long ago there lived, an old man and an old woman...
</div>

<div style="<em>text-wrap:nowrap</em>; width:200px; border:1px solid #ccc; margin-bottom: 1rem;">
Long, long ago there lived, an old man and an old woman...
</div>

<div style="<em>text-wrap:balance</em>; width:200px; border:1px solid #ccc;">
Long, long ago there lived, an old man and an old woman...
</div>
表示
Long, long ago there lived, an old man and an old woman...
Long, long ago there lived, an old man and an old woman...
Long, long ago there lived, an old man and an old woman...
Long, long ago there lived, an old man and an old woman...

Copyright (C) 2023-2024 杜甫々
初版:2023年12月3日、最終更新:2024年2月4日
http://www.tohoho-web.com/css/prop/text-wrap.htm