여러 브라우저에서 긴 단어를 Div에 안정적으로 래핑하려면 어떻게 해야 합니까?

Div에서 긴 단어 감싸기: 크로스 브라우저 가이드

Internet Explorer는 단어 감싸기 스타일을 제공하지만 개인은 단어에 대한 크로스 플랫폼 솔루션을 찾을 수 있습니다. -div 내에서 긴 문자열을 래핑합니다. 이 문서에서는 이 목표를 달성하기 위해 CSS와 JavaScript 방법을 모두 살펴봅니다.

CSS 방법:

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 */
}

텍스트가 포함된 div에 wordwrap 클래스를 적용하면 브라우저는 사용 가능한 너비에 맞게 긴 단어를 자동으로 줄 바꿈합니다.

JavaScript 방법 :

CSS가 옵션이 아닌 경우 JavaScript를 사용하여 단어 줄 바꿈을 시뮬레이션할 수도 있습니다. 한 가지 접근 방식은 각 문자를 범위 요소에 개별적으로 래핑하는 것입니다.

function wrapWords(div) {
  var text = div.innerHTML;
  var wrappedText = "";
  for (var i = 0; i < text.length; i++) {
    wrappedText += "<span>" + text[i] + "</span>";
  }
  div.innerHTML = wrappedText;
}

이 함수는 문자를 반복하여 각 문자에 대한 범위를 생성한 다음 래핑된 텍스트를 다시 div에 삽입합니다.

위 내용은 여러 브라우저에서 긴 단어를 Div에 안정적으로 래핑하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!