[html] ‘\ n’을 사용하여 HTML에서 줄 바꿈

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;

코드 스 니펫 표시

답변

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

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

&#10;줄 바꿈 및 &#13;캐리지 리턴

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