[게시판] pre 태그 글에 자동 줄 바꾸기 - pre, Whitespace, 브라우저별로

 

pre 태그는 HTML에서 사전 서식을 지정한 텍스트를 표시하는데 사용된다. 이 태그를 사용하면 공백, 탭, 줄바꿈 등이 그대로 보존되어 텍스트가 원본의 형태로 보여진다. 주로 코드 블록이나 고정폭 텍스트를 표시할 때 사용된다. 그러나 기본적으로 pre 태그는 자동 줄바꿈을 지원하지 않아, 긴 텍스트는 가로 스크롤이 생기게 되어 사용자 경험을 해칠 수 있다.

 

아래 게시판 예시에서 글의 가로줄이 너무 길어 표가 레이아웃을 벗어나 공백 영역까지 확장되었다. 

 

<tr class="long">
  <th>내용</th>
  <td ><pre><c:out value='${boardVO.bbsCn}'/></pre></td>
</tr>

 

 

 

이를 해결하기 위해 CSS의 white-space 속성과 word-wrap 속성을 사용하여 자동 줄바꿈을 구현할 수 있다.

white-space 속성은 요소 내부의 공백 문자(whitespace) 처리와 줄 바꿈 규칙을 지정한다. 공백문자는 문자가 나열 될 때 다른 문자 사이에 공간을 제공하는 문자를 의미한다. 이를 통해 텍스트의 가독성을 높이거나 레이아웃을 정렬하는 등의 역할을 한다. ex) Space, Tap, Enter 

 

여기서 사용된 CSS 설정은 다음과 같은 역할을 한다

• white-space: pre-wrap;는 텍스트가 컨테이너의 경계에 도달하면 자동으로 줄바꿈하되, 공백과 줄바꿈을 그대로 유지한다. CSS3에서 지원한다.
• white-space: -moz-pre-wrap;는 Firefox 전용 속성으로, pre-wrap과 동일한 기능을 제공한다.
• word-wrap: break-word;는 단어가 컨테이너의 경계를 넘어갈 경우, 단어를 끊어서 자동 줄바꿈하는 속성이다. 주로 너무 긴 단어나 URL 등이 pre 태그 안에 있을 때 유용하다.

pre {
  white-space: pre-wrap;      /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* Internet Explorer 5.5+ */
}