ひとりごと

文章の練習と自分のアウトプットのために書いていく日記です。

white-space:pre-wrapの話

個人的に、CSSが好きです。 少しのコードでいろいろできてすごいなぁって思います。

先日、文字列に改行コードが入っていた場合の改行で white-space:pre-wrap を使いました。 さくっとできたので、「偉いぞ、ありがとう。」と思いました。

developer.mozilla.org

ただ、少し運用してみたところ、問題が発覚しました。

prettierでhtmlを整形して改行されるとレイアウトが崩れてしまうのです。

<p>{{hoge}}</p>

これが

<p>
    {{hoge}}
</p>

こうなると余計な半角スペースが表示されます。

そのため、半角が含まれないように元のフォーマットに手動で直したりする作業が発生しました。prettierを実行するたびに、です。しかも、それを意図的にやっていると伝えるためにコメントも入れたりもしましたた。。

あれ、これ逆にめんどい。。。

結局、white-space:pre-wrapの利用をやめることにしました。

もちろん、便利に活用できる場面はあるのだと思いますが、今回はマッチしませんでした。

結局は文字列を改行コードで分割して配列にし、view側で <br/> を入れて表示しました。

備忘録メモでした。 おしまい。