CSSでの文字列の折り返しの方法【現役エンジニアが解説】
今回は、CSSでの文字列の折り返しの方法について、英字と日本語の場合に分け、簡単に解説していきます。
英字を枠内に収めるように折り返す
英字を枠内に収めるように折り返すには、word-breakプロパティを使います。
word-breakプロパティでは、値をbreak-allにすることによって英字を折り返します。
.hoge{
word-break:break-all;
}
上記のコードでは、hogeというクラスを持つ要素内の英字が枠に収まるように折り返して表示しています。
英字の単語が切れないように折り返す
英字の単語が切れないよう折り返すためには、word-wrapプロパティを使用します。
word-wrapプロパティでは、値をbreak-wordにすると英字の単語が途中で切れないように折り返します。
.hoge{
word-wrap:break-word;
}
上記のコードでは、hogeというクラスを持つ要素内の英字の単語が途中で切れないように折り返して表示しています。
日本語を読みやすい位置で区切り折り返す
CSSでは日本語を読みやすい位置で区切って折り返す方法はありませんが、HTMLでの工夫は可能です。
読みやすいブロックでspan要素を使って区切ることで、幅が足りなくなった際にspan要素ごとに折り返されます。
<span>読みやすい位置で</span><span>文字列を区切って折り返す</span>
上記のコードでは、「読みやすい位置で」と「文字列を区切って折り返す」という文字列を幅が狭いときに折り返して表示しています。