pre要素は文書を崩さずにそのまま表示します。その結果として幅に合わせた改行が行われず、横に長い文章やソースコードの場合、改行が行われず、見にくい表示となってしまいます。そこで、white-spaceプロパティを用いる方法を解説します。
CSS
修正前
これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。これはデータです。ただし、これもデータです。改行されるデータかどうかは確認してください。
pre要素内であってもブラウザの幅に合わせて改行を入れ、見やすい形に修正します。そのためにwhite-space: pre-wrap ;と設定し、幅に合わせた改行(折り返し)を入れます。white-space: nowrap;が改行無しの初期値です。
- 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のソースコードを表示するプラグインでも使用。