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