はじめに
ウェブデザインをしていて、長い文章や単語、コードの表示に困ったことはありませんか？
Tailwind CSS では、改行や折り返しを簡単に制御できるクラスが用意されており、文章の見やすさやデザインの完成度を大きく向上させることができます。
改行の制御
Tailwind CSS にはテキスト内の改行やすぺーずの扱いを制御するクラスが揃っています。
white-space 系
whitespace-normal
標準の折り返し。スペースで折り返します
whitespace-nowrap
改行なし。テキストは横に伸びる
whitespace-pre
改行もスペースもそのまま表示。\nで改行操作可能。
※「\n」を複数入れることも可
whitespace-pre-line
「\n」を使用し改行は反映されるが、連続スペースは圧縮。
折り返しも行うので文章用に最適
whitespace-pre-wrap
改行もスペースもそのまま表示、かつ折り返しもします。
pre-lineとの違いは、スペースがそのまま表示されるかのみになります。
word-break 系
break-normal
デフォルト。単語単位で折り返す
break-words
単語が長すぎる場合、途中で折り返す
break-all
どこでも強制折り返し。単語途中でも切れる
truncate
テキストが長い場合に「...」で省略する
まとめ
Tailwind CSS では、テキストの改行・折り返しを簡単に制御できるので、
文章やコード、タイトルの見やすさをぐっと向上させることができます。
- 改行の扱い → white-space系
- 単語の長文の省略 → word-break系
- 長い文章の省略 → truncateを活用
一見改行の操作をすることに変わりがなく、どちらも同じ用途に使われるように見えますが
狭い画面での折り返しなどの操作などでは、word-break系が必須であったりしますので使い分けができるようにしましょう！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼
下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼