html 사전 태그_HTML/Xhtml_웹 페이지 제작에서 자동으로 콘텐츠 래핑

이때 Overflow:auto;(코드가 컨테이너 경계를 초과하면 스크롤 상자가 표시됨)를 사용할 수 있지만 이 방법은 모든 주류 브라우저에 적합하지 않으며 일부 브라우저에서는 초과된 내용을 직접 잘라냅니다.

우리 모두는

 태그 가 미리 형식화된 텍스트를 정의할 수 있다는 것을 알고 있습니다. 일반적인 응용 프로그램은 컴퓨터 소스 코드를 나타내는 것입니다. pre 요소에 포함된 텍스트는 일반적으로 공백과 줄 바꿈을 유지하지만 안타깝게도 
 태그 안에 코드를 작성할 때 수동으로 래핑하지 않으면 자동으로 래핑되는 대신 그대로 유지됩니다. 

이때 overflow:auto;(코드가 컨테이너 경계를 벗어나면 스크롤박스가 표시됨)를 사용할 수 있으나, 이 방법이 모든 주류 브라우저에 적용되는 것은 아니며, 일부 브라우저는 초과 콘텐츠를 직접 잘라냅니다. 
标签里的文本换行(兼容IE, FF和Opera等)" src="http://files.jb51.net/do/uploads/allimg/090606/0242050.png"  style="max-width:90%">
이 사이트에는 소스코드가 사용되는 곳이 많지 않아서 이전에는 이 문제에 크게 관심을 두지 않았는데, 얼마 전 QQ에 한 열성적인 네티즌이 이 문제를 제보했기 때문에 이번에 이용하게 되었습니다. 테마를 변경하고 해결책을 찾으려면 공유하세요. 



코드 복사
코드는 다음과 같습니다.
 
pre { 
white -space: pre-wrap; /* css-3 */ 
white-space: -moz-pre-wrap /* Mozilla, 1999년 이후 */ 
white-space: -pre-wrap; Opera 4- 6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
word-wrap: break-word /* Internet Explorer 5.5 */ 
} 



이 CSS 솔루션은 pre 태그의 텍스트를 자동으로 줄 바꿈할 수 있습니다. 제가 사용하는 모든 브라우저에서 테스트했는데 IE6, IE7, IE8, Firefox, Opera, Safari 및 크롬. 
창 너비를 20자 미만으로 줄이기만 하면 경계를 초과하게 됩니다 
 게다가 이 CSS 기술을 공유하면 긴 줄바꿈 문제를 해결할 수 있다는 글도 본 적이 있습니다. 라고 말했지만, 잠시 후에 시도해 보았지만 여전히 작동하지 않았습니다.