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

2022-03-05

2021-11-27

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

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>

以上です。

この記事を書いた人

まっつん

エンジニア歴6年。普段はサーバーサイド開発が中心ですが、個人でスタートアップのサービスを1人で開発・運用しており、Laravel・JavaScript・AWSを中心にフルスタックで対応しています。2019年から、実務でぶつかった課題や解決策をこのブログで発信しています。

フィードバックのお願い

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