Other

white-spaceでpre-wrapをつけたら先頭がずれてしまったの時の対処方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ 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 にお願いします。