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

 요소는 미리 서식이 지정된 텍스트를 정의할 수 있습니다. pre 요소에 포함된 텍스트는 일반적으로 공백과 줄 바꿈을 유지합니다. 텍스트도 고정 너비 글꼴로 렌더링됩니다. </p>
<p><pre class="brush:php;toolbar:false"> 태그의 일반적인 용도는 컴퓨터 소스 코드를 나타내는 것입니다. </p>
<p>코드에 이미지나 웹페이지 주소가 있으면 코드가 너무 길어져서 페이지가 늘어나거나 코드가 경계를 넘어가는 문제가 자주 발생합니다. 매우 불편합니다. <a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>:hidden을 사용하면 원본 코드가 숨겨집니다. Overflow:auto를 사용하면 스크롤 막대가 나타나서 코드를 읽기가 불편해집니다. </p>
<p><pre class="brush:php;toolbar:false"> 내용의 자동 줄 바꿈 문제를 해결하는 방법: </p>
<p>1. 먼저 사용해 보세요: <a href="//m.sbmmt.com/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:html;toolbar:false">xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}