'\ n'을 사용하여 HTML에서 줄 바꿈

HTML이 \n줄 바꿈을 올바르게 처리하도록하는 방법 이 있습니까? 아니면 그것들을 대체해야 <br/>합니까?

https://jsfiddle.net/zawyatzt/

이것은 html로 줄 바꿈을 표시하고 캐리지를 반환하는 것이므로 명시 적으로 할 필요는 없습니다. 공백 속성 프리 라인 값을 설정하여 CSS에서 수행 할 수 있습니다.

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

에 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>

귀하의 질문에 따라 다양한 방법으로 수행 할 수 있습니다.-예를 들어 다음을 사용할 수 있습니다.

텍스트 영역에 새 줄을 삽입하려면 다음을 시도하십시오.


줄 바꿈 및 
캐리지 리턴

<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와 같은 서버를 설치해야합니다.

<pre>태그를 사용할 수 있습니다

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

당신은 <pre>태그 를 사용할 수 있습니다 :

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

를 사용 white-space: pre-line하면 줄 바꿈없이 HTML에 직접 텍스트를 입력 할 수 있습니다.\n

당신이 사용하는 경우 innerText예 비 전 요소에 자바 스크립트를 통해 요소의 속성을 <div>의 \n값으로 대체됩니다 <br>기본적으로 DOM에

• innerText:을 대체 \n와<br>
• innerHTML, textContent: 스타일링 사용 필요white-space

텍스트를 적용하는 방법에 따라 다르지만 여러 가지 옵션이 있습니다.

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

간단하고 선형 적 :

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

라인 브레이크를로 교체하는 것을 고려해야합니다 <br/>. HTML에서 줄 바꿈은 코드의 줄 바꿈만을 의미합니다.

또는 단락에 줄을 배치하는 것과 같은 다른 HTML 마크 업을 사용할 수 있습니다.

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

또는 다른 래퍼는 예를 들어 좋아하는 <div>sample</div>CSS 속성을 가진 : display: block.

을 사용할 수도 있습니다 <pre>. 의 콘텐츠는 preHTML 스타일을 무시합니다. 즉, 정상적인 \n브레이크 라인이있는 순수한 html을 표시합니다.