HTMLコードでPre-Formatted Textタグを使用する方法は次のとおりです
段落要素のように、WebページのHTMLコードにテキストを追加すると、それらのテキスト行がどこで壊れるか、または使用される間隔を制御することはほとんどありません。 これは、Webブラウザが、テキストを含む領域に基づいて必要に応じてテキストを流すためです。 これには、ページを表示するために使用される画面のサイズに基づいて変化する、非常に流動的なレイアウトを有する応答性のあるウェブサイトが含まれる。
HTMLテキストは、一度それが格納されている領域の終わりに達すると必要な行を破ります。 結局のところ、ブラウザはテキストがどのように壊れているかを判断する上でより多くの役割を果たします。
スペースを追加して特定のフォーマットやレイアウトを作成する場合、HTMLはスペースバー、タブ、キャリッジリターンなど、コードに追加されるスペースを認識しません。 1つの単語とそれに続く単語の間に20個のスペースを入れると、ブラウザは1つのスペースだけをレンダリングします。 これは空白の崩壊と呼ばれ、実際には業界初の多くの新しく苦労したHTMLの概念の1つです。 彼らは、HTMLの空白がMicrosoft Wordのようなプログラムで行われるように動作することを期待していますが、それはHTMLの空白がまったくどのように動作するかではありません。
ほとんどの場合、HTML文書の通常のテキスト処理は必要なものだけですが、実際にはテキストのスペースや行の区切りの正確な制御が必要な場合があります。
これはあらかじめフォーマットされたテキストとして知られています（つまり、フォーマットを指定します）。 HTMLのpreタグを使用して、Webページにあらかじめフォーマットされたテキストを追加することができます。
タグの使用
何年も前、それはあらかじめフォーマットされたテキストのブロックを持つWebページを見るのが常であった。 プレタグを使用してページのセクションを入力自体でフォーマットされたものとして定義することは、ウェブデザイナーが望むようにテキストを表示させるための迅速かつ簡単な方法でした。
これはレイアウトのCSSが登場する前で、Webデザイナーが実際にテーブルや他のHTML専用の方法を使ってレイアウトを強制しようとしていた時代です。 これは、あらかじめフォーマットされたテキストは、HTMLレンダリングではなく、書体の慣習によってその構造が定義されたテキストとして定義されているため、元に戻りました。
今日では、このタグはあまり使われていません。なぜなら、CSSはHTMLに見せようとするよりもはるかに効率的な方法でビジュアルスタイルを指定することができ、Web標準によって構造（HTML）とスタイル（CSS） それでも、改行を強制したい郵送先住所の場合や、改行がコンテンツの読書や全体の流れに不可欠な詩の例のように、書式設定済みのテキストが意味をなさない場合があります。
HTMLの
タグを使用する方法の1つは次のとおりです。Twas brilligとslithey toves典型的なHTMLは、ドキュメント内の空白を崩壊させます。 つまり、このテキストで使用されているキャリッジリターン、スペース、およびタブ文字はすべて1つのスペースに縮小されます。 p（段落）タグのような典型的なHTMLタグに上記の引用符を入力した場合、次のように1行のテキストになります。
Twas brillig and slithey toves揺れて揺れる
preタグはそのまま空白文字を残します。 したがって、改行、スペース、およびタブはすべて、ブラウザのそのコンテンツのレンダリングで維持されます。 同じテキストのプレタグの中に引用符を入れると、次のような表示になります。
Twas brillig and slithey toves揺れて揺れるフォントについて
preタグは、あなたが書いたテキストのスペースや区切りを維持するだけではありません。 ほとんどのブラウザでは、モノスペースフォントで書かれています。 これにより、テキスト内の文字はすべて同じ幅になります。 言い換えれば、文字iは文字wと同じくらいのスペースを占めます。
ブラウザが表示する既定のモノスペースの代わりに別のフォントを使用する場合は、これをスタイルシートで変更し、テキストをレンダリングする他のフォントを選択することもできます 。
HTML5
注意すべき点の1つは、HTML5では、
属性が 要素でサポートされていないことです。 HTML 4.01では、幅は行に含まれる文字数を指定しましたが、これはHTML5以降では削除されています。ジェレミージラール編集：2/2/17