'\ n'を含むHTMLの改行

221

HTMLで\n改行を適切に処理する方法はありますか？または私はそれらを置き換える必要があり<br/>ますか？

https://jsfiddle.net/zawyatzt/

html

— stkvtflw
ソース

jsfiddle.net/zawyatzt/2

— shas

353

これは、改行を表示してキャリッジをHTMLで返すため、明示的に行う必要はありません。ホワイトスペース属性の行前の値を設定することにより、cssでそれを行うことができます。

<span style="white-space: pre-line">@Model.CommentText</span>

— カーキショイアブ
ソース

13

white-space: pre-wrapタブスペースも確保したい場合にも使用できます。

— Vijay Shegokar

124

のCSS white-spaceプロパティを使用できます\n。のようにタブを保持することもできます\t。

改行の場合\n：

white-space: pre-line;

改行\nとタブの場合\t：

white-space: pre-wrap;

コードスニペットを表示

document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';

document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';

#just-line-break {
  white-space: pre-line;
}

#line-break-and-tab {
  white-space: pre-wrap;
}

<div id="just-line-break"></div>

<br/>

<div id="line-break-and-tab"></div>

スニペットを展開

— ダーレッソン
ソース

これは長い間利用可能であり、すべての主要なブラウザでサポートされています。

— Darlesson

23

あなたの質問に従って、それはさまざまな方法で行うことができます：-たとえば、あなたは次のものを使うことができます：

テキスト領域に新しい行を挿入したい場合は、これを試すことができます：-


ラインフィードとキャリッジリターン

<textarea>Hello &#10;&#13;Stackoverflow</textarea>

また、<pre>---</pre>フォーマット済みのテキストを使用することもできます。

<pre>
     This is Line1
     This is Line2
     This is Line3
</pre>

または、<p>----</p>段落を使用できます

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

注：使用する\n場合は、XamppやApacheなどのサーバーをインストールしてサーバー側の言語をサポートする必要があります。

— サンパッド
ソース

5

最後のメモについて詳しく説明していただけますか？これにはサーバー側のサポートが必要だと思う理由がわかりません...

— シャドウ

他のいくつかの回答が示しているように、ここの最後の文は客観的に誤りです。また、ネイティブでサポートされていなくても、クライアント側のJavaScriptで簡単に変更できます。

— ジョンモンゴメリー

13

<pre>タグを使用できます

<div class="text">
<pre>
  abc
  def
  ghi
</pre>
  abc
  def
  ghi
</div>

スニペットを展開

— ヨハン・ブレンマー
ソース

12

あなたは<pre>タグを使うことができます：

<div class="text">
<pre>
abc
def
ghi
</pre>
</div>

スニペットを展開

— エサン
ソース

5

を使用white-space: pre-lineすると、使用せずに改行付きのHTMLにテキストを直接入力できます\n

innerText非pre要素（例：a）<div>でJavaScriptを介して要素のプロパティを使用する場合、\n値は<br>デフォルトでDOMで置き換えられます

innerText：置き換え\n付き<br>
innerHTML、textContent：スタイリングの使用が必要white-space

テキストの適用方法によって異なりますが、いくつかのオプションがあります

const node = document.createElement('div');
node.innerText = '\n Test \n One '

— ドレナイ
ソース

4

シンプルで線形：

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>

— アレッサンドロ・オルナーノ
ソース

2

ラインブレーキをに交換することを検討してください<br/>。HTMLでは、改行はコード内の改行のみを表します。

または、段落に行を配置するなど、他のHTMLマークアップを使用することもできます。

<p>Sample line</p>
<p>Another line</p>

または、例えば<div>sample</div>css属性を持つ他のラッパー：display: block。

も使用できます<pre>。のコンテンツでpreは、htmlスタイリングは無視されます。つまり、通常の\nブレーキラインで純粋なHTMLを表示します

— ルーク
ソース