久しぶりに感じるCSSについての記事です。
今回紹介するのは、テキストの改行や空白を操作できる「white-space」というプロパティについて。
新しく使用したプラグインのせいか、テキストが改行されなくなったので、その対処法です。
まず、プロパティの値と、その説明については下記をご覧ください。
なお、参考にさせていただいたサイトはこちらから。
white-spaceとは｜コーディングのプロが作るCSS辞典
https://html-coding.co.jp/annex/dictionary/css/white-space/
| プロパティの値 | 説明 |
|---|---|
| normal（初期値） | テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、自動的に折り返しをして表示 |
| nowrap | テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示。なお自動的な折り返しは行わない |
| pre | テキスト内の連続する半角スペース、タブ、改行をそのまま表示。なお自動的な折り返しは行わない |
| pre-wrap | テキスト内の連続する半角スペース、タブ、改行をそのまま表示し、それに加えて自動的な折り返しも行う |
| pre-line | ソース中の連続する半角スペース、タブを一つの半角スペースにまとめて表示する。しかし、改行している箇所は改行して表示し、それに加えて自動的な折り返しも行う |
以前は normal のままだったのですが、プラグインの影響なのか、改行コードが無効になっていたため、pre-wrap に変更しました。
すると、問題なく改行されました。
改行やスペースをそのまま表示するのなら、pre でもいいのですが、これだと文字の折り返しが行われないため、pre-wrap がおすすめです。
以上、改行コードが向こうになってしまった場合の対処法でした。
皆様も、もし何らかのライブラリやプラグインの影響で、テキストが改行されなくなったり、スペースがおかしいと思った時は、こちらのプロパティを調整してみてください。
ちなみに、使用したプラグインは「react-string-replace」です。
リッチテキストを使用するために導入しました。
