기타

pre 태그 사용법 & 줄 바꿈

minsun309 2024. 8. 22. 23:37

<pre> 태그는 텍스트에 사용된 여백과 줄 바꿈이 모두 그대로 브라우저 화면에 나타낸다.

<body>
    <div class="preArea">
      <pre>
        Lorem Ipsum is 
        
        simply dummy text of the printing and 
           typesetting industry.
      </pre>
    </div>
</body>

 

 

<pre>태그는 내부에 있는 글을 그대로 보여주기 때문에 긴 글을 일 경우 줄 바꿈이 안되고 영역을 넘어간다.

그래서 pre 태그에 white-space: pre-wrap css 를 추가해줘야 자동으로 줄 바꿈이 이루어진다.

<head>
	<style>
	 .preArea {
        width: 250px;
        font-size: 20px;
        border: 1px solid #000;
      }
	 pre {
        white-space: pre-wrap;
        word-break: break-all;
      }
   </style>
</head>
<body>
    <div class="preArea">
      <pre>
        Lorem Ipsum is 
        
        simply dummy text of the printing and 
           typesetting industry.
      </pre>
    </div>
</body>