くまだどうも、くまだです。
テキスト折り返しに関するanywhereについて。
他の折り返しについてはこちら。
テキストの折り返し anywhere
テキストの折り返しの指定で、overflow-wrapプロパティというのがあり、anywhereはその値の一つです。
例えば以下のように指定できます。
<div class="wrap">
<div class="box">
<p class="anywhere">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div class="box">
<p >texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
</div>.box {
border: 1px solid #000;
padding: 10px;
max-width: 180px;
}
.wrap {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
}
.anywhere {
overflow-wrap: anywhere;
}
表示の通り、anywhereを指定すると単語の途中でも折り返します。
overflow-wrapプロパティは以下の値を取ることができます。
- anywhere：単語の途中で折り返す。
- break-word：単語の途中で折り返す。
- normal：初期値。単語間で可能なところで折り返す。
anywhereとbreak-wordは似ていますが、以下のようにanywhereのほうは改行位置に合わせて単語が改行しますが、break-wordのほうは、単語の長さに合わせた位置で改行しています。
<div class="wrap">
<div class="box">
<p class="anywhere">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext abc</p>
</div>
<div class="box">
<p class="break-word">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext abc</p>
</div>
</div>.box {
border: 1px solid #000;
padding: 10px;
}
.wrap {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
ここまで読んでくださりありがとうございました。