幅に合わせてpre要素内に改行を入れる コピペで使えるHTML+CSS

スポンサーリンク

pre要素は文書を崩さずにそのまま表示します。その結果として幅に合わせた改行が行われず、横に長い文章やソースコードの場合、改行が行われず、見にくい表示となってしまいます。そこで、white-spaceプロパティを用いる方法を解説します。

スポンサーリンク

CSS

修正前
これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。 

 pre要素内であってもブラウザの幅に合わせて改行を入れ、見やすい形に修正します。そのためにwhite-space: pre-wrap ;と設定し、幅に合わせた改行(折り返し)を入れます。white-space: nowrap;が改行無しの初期値です。

参考   white-space
normal
表示方法を変更しない(初期値)
nowrap
スペース、タブ、改行を半角スペースとして表示。自動改行は無し。
pre
スペース、タブ、改行はそのまま表示。自動改行は無し
pre-wrap
スペース、タブ、改行はそのまま表示。幅に合わせて自動改行あり
pre-line
改行はそのまま表示されますが、スペースとタブは半角スペースとして表示。自動改行あり。
break-spaces
文末のスペースがそのまま表示される点を除き、pre-wrapとほぼ同じ。
修正後
これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。 
style属性で記述
<pre style="white-space: pre-wrap ;">
これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。
</pre>
スタイルシートで記述
<pre class="pre-nline"> これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。 </pre>
.pre-nline{
    white-space: pre-wrap ;
}

pre要素の詳細

pre 整形済みテキスト コピペで使えるHTML+CSS
作成したテキストをそのままの形で表示するpre要素。WordPressのソースコードを表示するプラグインでも使用。