⇨ Laravel の 記事の目次はこちら

white-space で pre-wrap をつけたら先頭に余白ができてずれてしまったの時の対処方法についてまとめました。

結論

white-space: pre-wrap;

は、改行コードで改行してくれる便利な CSS ではありますが、

エンターなどで改行した部分についても漏れなく作用してしまい、不具合が発生します。

なので、スタイルを当てたタグの中で改行などしていればそれをやめれば想定通り動くと思います。

良い例

<div style="white-space:pre-wrap;">{{$post->content}}</div>

ダメな例

<div style="white-space:pre-wrap;">
  {{$post->content}}
</div>

まとめ

以上です。

苦情・意見は Twitter の DM にお願いします。