html pre 태그 내용의 자동 줄바꿈 문제 해결

 요소는 미리 서식이 지정된 텍스트를 정의할 수 있습니다. pre 요소에 포함된 텍스트는 일반적으로 공백과 줄 바꿈을 유지합니다. 텍스트도 고정 너비 글꼴로 렌더링됩니다. </p>
<p><pre class="brush:php;toolbar:false"> 태그의 일반적인 용도는 컴퓨터 소스 코드를 나타내는 것입니다. </p>
<p>코드에 이미지나 웹페이지 주소가 있으면 코드가 너무 길어져서 페이지가 늘어나거나 코드가 경계를 넘어가는 문제가 자주 발생합니다. 매우 불편합니다. <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hidden을 사용하면 원본 코드가 숨겨집니다. Overflow:auto를 사용하면 스크롤 막대가 나타나서 코드를 읽기가 불편해집니다. </p>
<p><pre class="brush:php;toolbar:false"> 내용의 자동 줄 바꿈 문제를 해결하는 방법: </p>
<p>1. 먼저 사용해 보세요: <a href="http://www.php.cn/wiki/878.html" target="_blank">word-wrap</a>: break-word, IE, OP, Chrome 콘텐츠를 자동으로 줄 바꿈합니다. , Safari를 사용할 수 있고 FF를 사용할 수 있습니다. 정말 비극입니다. </p>
<p>데모를 보려면 클릭하세요</p>
<p>2. pre의 기본 브라우저 스타일을 확인했습니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

로그인 후 복사

모두 white-space를 갖습니다. pre, 공백 값을 살펴보세요.

값 설명 일반 기본값입니다. 브라우저는 공백을 무시합니다. 사전 공백은 브라우저에 의해 유지됩니다. 이는 HTML의

 태그처럼 동작합니다. 이제 랩 텍스트는 줄 바꿈되지 않고 <br> 태그를 만날 때까지 같은 줄에 계속 표시됩니다. pre-wrap은 공백 시퀀스를 유지하지만 줄을 정상적으로 래핑합니다. pre-line은 공백 시퀀스를 병합하지만 개행은 유지합니다. 상속은 공백 <a href="http://www.php.cn/wiki/169.html" target="_blank"> 속성 </a>의 값이 상위 요소에서 상속되어야 함을 지정합니다. </p><p>공백 시퀀스를 유지하지만 정상적으로 줄 바꿈을 수행하는 사전 래핑이 있습니다. </p><p>그렇습니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>pre {
white-space: pre-wrap;
word-wrap: break-word;
}

로그인 후 복사