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

e03b848252eb9375d56be284e690e873 요소는 미리 서식이 지정된 텍스트를 정의할 수 있습니다. pre 요소에 포함된 텍스트는 일반적으로 공백과 줄 바꿈을 유지합니다. 텍스트도 고정 너비 글꼴로 렌더링됩니다.

e03b848252eb9375d56be284e690e873 태그의 일반적인 용도는 컴퓨터 소스 코드를 나타내는 것입니다.

코드에 이미지나 웹페이지 주소가 있으면 코드가 너무 길어져서 페이지가 늘어나거나 코드가 경계를 넘어가는 문제가 자주 발생합니다. 매우 불편합니다. overflow:hidden을 사용하면 원본 코드가 숨겨집니다. Overflow:auto를 사용하면 스크롤 막대가 나타나서 코드를 읽기가 불편해집니다.

e03b848252eb9375d56be284e690e873 내용의 자동 줄 바꿈 문제를 해결하는 방법:

1. 먼저 사용해 보세요: word-wrap: break-word, IE, OP, Chrome 콘텐츠를 자동으로 줄 바꿈합니다. , Safari를 사용할 수 있고 FF를 사용할 수 있습니다. 정말 비극입니다.

데모를 보려면 클릭하세요

2. pre의 기본 브라우저 스타일을 확인했습니다.

xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

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

값 설명 일반 기본값입니다. 브라우저는 공백을 무시합니다. 사전 공백은 브라우저에 의해 유지됩니다. 이는 HTML의 e03b848252eb9375d56be284e690e873 태그처럼 동작합니다. 이제 랩 텍스트는 줄 바꿈되지 않고 0c6dc11e160d3b678d68754cc175188a 태그를 만날 때까지 같은 줄에 계속 표시됩니다. pre-wrap은 공백 시퀀스를 유지하지만 줄을 정상적으로 래핑합니다. pre-line은 공백 시퀀스를 병합하지만 개행은 유지합니다. 상속은 공백 속성 의 값이 상위 요소에서 상속되어야 함을 지정합니다.

공백 시퀀스를 유지하지만 정상적으로 줄 바꿈을 수행하는 사전 래핑이 있습니다.

그렇습니다.

pre {
white-space: pre-wrap;
word-wrap: break-word;
}

스타일을 추가하면 e03b848252eb9375d56be284e690e873의 콘텐츠가 자동으로 래핑됩니다.

위 내용은 html pre 태그 내용의 자동 줄바꿈 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!