pre 整形済みテキスト コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

pre要素の概要

整形済みテキストHTML
<pre>…</pre>
目的 作成したテキストをそのままの形で表示。WordPressのソースコードを表示するプラグインでも使用。
関連 <code>
    HTMLはマークアップ       言語です。
  JavaScriptは  マークアップ言語ではありません。

<pre>を使わない場合、以下のように改行がカットされ、空白文字が1つのみにまとめられます。

HTMLはマークアップ 言語です。 JavaScriptは マークアップ言語ではありません。
<pre>
    HTMLはマークアップ       言語です。
  JavaScriptは マークアップ言語ではありません。
</pre> 

属性

グローバル属性のみ

CSSデザイン

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