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

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

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 結論
  2. まとめ

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

PR

結論

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

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。