CSS で <Button> タグ内の文字を折り返す。

目次

<button>

当ブログの <button> タグ内の文字がスマホ画面からはみ出してしまうので CSS の文字を折り返す事の出来るプロパティを色々と試してみました。

「サンプルページ」を作成して試してみた結果、以下 4 つの設定でそれぞれ <button> タグの文字を折り返す事ができました。

私が各プロパティの違いをよく分かっていないので、とりあえず出来たレベルです。

overflow-wrap: anywhere;
word-break: break-all;
word-break: break-word;
line-break: anywhere;

サンプルページではなく、当ブログで試してみた結果、「white-space: pre-line;」を入れる事で文字の折り返しが出来ました。

white-space: pre-line;

サンプルページは以下のリンクからご覧いただけます。

目次まで戻る

各プロパティ比較

下記の画像をクリックすると、元の大きいサイズの画像を見る事が出来ます。

目次まで戻る

テスト環境

• Mozilla Firefox 118.0.2
• Windos10（64 ビット）

以上、閲覧ありがとうございました。

目次まで戻る