CSS/JS에서 브라우저 간 단어 줄 바꿈을 달성하는 방법은 무엇입니까?

CSS/JS의 단어 줄 바꿈: 크로스 브라우저 솔루션

스크롤하지 않고 미리 결정된 DIV 너비 내에서 긴 텍스트 문자열을 줄 바꿈하는 과제 오랫동안 웹 개발자들을 괴롭혀 왔습니다. 이 문제를 해결하기 위해 각각 고유한 한계가 있는 다양한 접근 방식이 탐색되었습니다.

• 오버플로 "오버플로: 숨김/자동/스크롤"과 같은 기술은 텍스트 가시성을 제한하고 스크롤을 허용합니다. 이 시나리오에서는 바람직하지 않습니다.
• Injecting ­ 문자열에 추가하려면 JavaScript 또는 서버 측 수정이 필요하지만 복사 및 붙여넣기가 중단될 수 있으며 여러 브라우저에서 일관되게 지원되지 않습니다.
• 숨겨진 요소를 통해 텍스트 너비를 측정하는 것은 계산 비용이 많이 들고 비용이 많이 듭니다. 특히 광범위한 텍스트 본문의 경우 사이트가 정지될 수 있습니다.
• 고정폭 글꼴은 너비 계산을 방해하고 텍스트 스타일을 제한할 수 있습니다.

"단어와 같은 유망한 후보에도 불구하고 -wrap: break-word" 및 "" 태그를 사용하는 경우 이러한 접근 방식은 브라우저 지원이 부족하거나 정확한 중단점 계산이 필요하므로 여전히 파악하기 어렵습니다.

유레카! CSS를 구출하세요

마지막으로 CSS 영역에서 획기적인 발전이 이루어졌습니다.

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

이 CSS 규칙을 활용하면 개발자는 함정 없이 브라우저 간 단어 줄 바꿈을 원활하게 달성할 수 있습니다. 이전 방법 중. 추가적으로 "word-wrap: Normal;"을 사용할 수도 있습니다. 기본 줄 바꿈 동작으로 되돌리는 규칙입니다.

이 솔루션은 단어 줄 바꿈 문제를 우아하게 해결하여 개발자가 미적으로 보기 좋고 브라우저 호환 방식으로 긴 URL 및 기타 중단 없는 텍스트 문자열을 표시할 수 있도록 해줍니다.

위 내용은 CSS/JS에서 브라우저 간 단어 줄 바꿈을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!