가독성을 저하하지 않고 브라우저 간 텍스트 줄바꿈을 달성하려면 어떻게 해야 합니까?

크로스 브라우저 텍스트 래핑: 과제 해결

고정 너비 div 내에 긴 텍스트를 캡슐화하는 것은 브라우저 간 악몽이 될 수 있습니다. , 특히 해당 텍스트에 자연스러운 구분 공백이 없는 경우 더욱 그렇습니다. 다양한 접근 방식이 제안되었지만 각각에는 단점이 있습니다.

전통 기술은 부족합니다

오버플로 설정 및 수줍은 캐릭터 주입은 효율성이 제한적입니다. 숨겨진 요소와 고정 폭 글꼴은 확대/축소 시 예기치 않은 동작이 발생할 수 있습니다.

유망하지만 불완전한 솔루션

CSS3의 "word-wrap: break-word" 속성이 이상적으로 보이지만, 주요 브라우저에서는 여전히 지원되지 않습니다. WBR 태그를 삽입하면 브라우저 간 호환성이 보장되지만 최적의 중단점을 찾는 것은 여전히 ​​어렵습니다.

찾기 어려운 성배

완벽한 솔루션을 찾기 위한 노력은 계속됩니다. 그러나 유망한 한 가지 접근 방식은 다음과 같습니다.

CSS를 구출

"공백" 및 "단어 줄 바꿈"과 같은 CSS 속성을 활용하면 다음과 같은 목표를 달성할 수 있습니다. 브라우저 간 텍스트 줄 바꿈:

.wordwrap {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

이러한 스타일을 컨테이너에 적용하면 긴 텍스트 부분이 우아하게 줄 바꿈되어 브라우저 호환성을 희생하지 않고도 가독성을 유지할 수 있습니다.

위 내용은 가독성을 저하하지 않고 브라우저 간 텍스트 줄바꿈을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!