HTML の改行 (\n) または復帰 (\r) 記号、br、white、space、pre、line が機能しない場合の解決策

---

序文

HTML改行記号と復帰記号 (\nと) がで機能しないように見える場合は\r、いくつかの原因が考えられます。

---

html は空白文字を解釈しません

ではHTML、連続する空白文字 (改行文字や復帰文字を含む) は通常、単一のスペースとして解釈されます。これはHTMLデフォルトの動作であり、ページ表示の一貫性と読みやすさを確保することを目的としています。実際にページ上に改行を表示したい場合は、HTMLタグ<br>またはCSS属性を使用する必要がありますwhite-space: pre-line;。

<!-- 使用 <br> 标签进行换行 -->
<p>This is the first line.<br>This is the second line.</p>

<!-- 或者使用 CSS 属性 white-space: pre-line; -->
<style>
  .pre-line {
       
       
   	white-space: pre-line;
  }
</style>

<p class="pre-line">This is the first line.
This is the second line.</p>

---

CSS スタイルの効果

特定のCSSスタイルを適用していると、改行や復帰が機能しなくなる可能性があります。ファイルをチェックして、テキストの表示方法に影響を与える可能性のある設定やその他のプロパティCSSがないかどうかを確認してください。white-spacedisplay

---

特定のテキスト領域

<element>などの一部の要素では<pre>、空白文字が自動的に 1 つのスペースに結合されずに、テキスト内の空白文字が保持されます。これらの要素で改行と復帰のテストを試すことができます。

---

ホワイトスペース

MDN

white-space要素内の空白文字 (en-US) の処理方法を設定するために使用される属性。
このプロパティは、
空白をマージするかどうかと、その方法という 2 つのことを指定します。
行を折り返すかどうか、および行を折り返す方法。
単語内で切り詰められるようにするには、代わりにoverflow-wrap、word-break、またはハイフン を使用します。

---

w3スクール

価値	説明する
normal	デフォルト。空白はブラウザによって無視されます。
pre	空白はブラウザによって保持されます。HTMLのタグのように動作します<pre>。
nowrap	<br>テキストは折り返されず、タグが見つかるまで同じ行に続きます。
pre-wrap	空白シーケンスは保持されますが、改行は通常どおり実行されます。
pre-line	空白シーケンスをマージしますが、改行は保持します。
inherit	属性の値が親要素から継承されるように指定しますwhite-space。