> 웹 프론트엔드 > CSS 튜토리얼 > HTML Div에서 크로스 브라우저 단어 줄 바꿈을 달성하는 방법은 무엇입니까?

HTML Div에서 크로스 브라우저 단어 줄 바꿈을 달성하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-12-18 00:50:13
원래의
910명이 탐색했습니다.

How to Achieve Cross-Browser Word Wrapping in HTML Divs?

Divs에서 긴 텍스트의 크로스 브라우저 단어 줄 바꿈

질문:

크로스 브라우저를 어떻게 구현할 수 있나요? HTML 내의 긴 문자열에 대한 단어 줄 바꿈 divs?

답변:

다양한 브라우저에서 단어 줄바꿈을 보장하려면 다음 CSS 속성을 사용할 수 있습니다. 활용:

.wordwrap {
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}
로그인 후 복사

설명:

  • white-space: pre-wrap: 특정 단어 줄 바꿈을 지원하지 않는 브라우저는 공백 경계에서 줄 바꿈.
  • 공백: -moz-pre-wrap: 사전 래핑 동작을 활성화하기 위한 Firefox 특정 속성.
  • white-space: -pre-wrap: 7 이전의 Opera 버전.
  • 공백: -o-pre-wrap: 오페라 7.
  • word-wrap: break-word: 하이픈 지점에서 단어를 분리하는 IE 전용 속성입니다.

이러한 속성을 결합하면 "wordwrap" 클래스가 있는 div는 모든 문자 중단점에서 줄 바꿈되어 브라우저 간 호환성을 보장합니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿