[html] 개행태그 pre 사용하기 / 엔터 없는 긴 텍스트 자동줄바꿈하기

 

 

html에서 텍스트를 출력하면 개행문자가 적용되지 않고 한 줄로 길게 출력된다.

 

샘플코드

<p>
enter
enter
enter
</p>

 

결과

 

 

 

---

<pre> 태그를 사용하면 줄바꿈이 적용된다.

예전엔 소스코드 자체를 있는 그대로 출력하는 <xmp> 태그도 사용했지만 현대 웹 개발에는 사용되지 않는다.

 

샘플코드

<pre>
enter
enter
enter
</pre>

 

결과

 

 

 

---

다만 <pre> 태그는 텍스트를 작성한 그대로 출력하기 때문에,
아주 긴 글을 개행 없이 작성했다면 width를 무시하고 길게 이어진다.

 

샘플코드

<pre>
This is an example of preformatted text. It will preserve all white space and line breaks exactly as they appear in the source code.
</pre>

 

결과

아래와 같이 width를 무시하고 줄바꿈 없이 이어진다.

 

 

 

아래와 같은 CSS 스타일을 적용하면 해결된다.

 

CSS 코드

pre {
    	white-space: pre-wrap;
}

 

결과

 

 

 

스타일 시트를 사용하지 않고 html 인라인 코드로도 잘 적용된다.

<pre style="white-space: pre-wrap;">

 

---

브라우저별로 스타일 적용이 안 되는 경우가 있다면 다음 코드도 시도해보자.

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

 

 

참고 🔗 https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag