우리 모두는 <pre> 태그가 미리 서식이 지정된 텍스트를 정의할 수 있으며 일반적인 응용 프로그램은 컴퓨터 소스 코드를 나타내는 것임을 알고 있습니다. pre 요소에 포함된 텍스트는 일반적으로 공백과 줄 바꿈을 유지하지만 불행하게도 <pre> 태그 안에 코드를 작성할 때 줄 바꿈을 수동으로 줄 바꿈하지 않으면 줄바꿈 대신 그대로 유지됩니다.
이때 Overflow:auto;(코드가 컨테이너 경계를 초과하면 스크롤 상자가 표시됨)를 사용할 수 있지만 이 방법은 모든 주류 브라우저에 적합하지 않으며 일부 브라우저에서는 초과된 내용을 직접 잘라냅니다.
이 사이트에는 소스코드가 사용되는 곳이 많지 않기 때문에 예전에는 이 문제에 크게 관심을 두지 않았었는데, 얼마 전 QQ에 한 열성적인 네티즌이 이 문제를 제보해서 이번에 테마를 바꿨을 때 찾아봤습니다. 솔루션을 위해 공유했습니다.
| 사전 { 공백: 사전 포장; /* CSS-3 */ 공백: -moz-pre-wrap; /* Mozilla, 1999년 이후 */ 공백: -pre-wrap; /* Opera 4-6 */ 공백: -o-pre-wrap /* 오페라 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } |
이 CSS 솔루션은 pre 태그의 텍스트를 자동으로 줄 바꿈할 수 있습니다. 제가 사용하는 모든 브라우저에서 테스트했는데 모두 IE6, IE7, IE8, Firefox, Opera, Safari 및 Chrome을 지원합니다.
창 너비를 20자 미만으로 줄인 경우에만 범위를 벗어납니다.