<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>
'기타' 카테고리의 다른 글
| svg <linearGradient>, <radialGradient>, <stop>, <g> (0) | 2024.08.27 |
|---|---|
| svg <defs>, <use> (0) | 2024.08.27 |
| svg 태그 (0) | 2024.08.27 |
| video 태그 (0) | 2024.08.23 |
