Div 요소에서 브라우저 간 단어 줄바꿈을 어떻게 달성할 수 있습니까?-CSS 튜토리얼-php.cn

Div 요소에서 브라우저 간 단어 줄바꿈을 어떻게 달성할 수 있습니까?

Linda Hamilton

풀어 주다： 2024-12-07 10:16:13

원래의

510명이 탐색했습니다.

How Can I Achieve Cross-Browser Word Wrapping in a Div Element?

Div의 확장 문자열에 대한 크로스 브라우저 단어 줄 바꿈

Internet Explorer는 고유한 단어 줄 바꿈 스타일을 제공하는 반면, 크로스-브라우저 단어 줄 바꿈 div 내에서 텍스트를 래핑하기 위한 브라우저 솔루션은 일반적인 관심사입니다. 이 문서에서는 이 과제를 해결하기 위해 CSS와 JavaScript 방법을 모두 살펴봅니다.

CSS 접근 방식

CSS는 div 내에서 긴 문자열을 단어 줄 바꿈하기 위한 여러 옵션을 제공합니다.

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.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 */
}

로그인 후 복사

자바스크립트 접근법

CSS만큼 우아하지는 않지만 JavaScript는 단어 줄바꿈도 가능합니다. 한 가지 접근 방식은 wordwrap 기능을 사용하는 것입니다.

function wordwrap(str, width) {
  if (!width) { width = 80; }

  var re = new RegExp(".{" + width + "}(\s|$)|\S+\S{0," + (width - 1) + "}", "g");
  return str.match(re).join("\n");
}

로그인 후 복사

Div에 적용

div에 접근 방식을 적용하려면 CSS에서 적절한 코드를 사용하거나 JavaScript 파일을 열고 관련 클래스나 ID를 div 요소에 할당합니다.

CSS의 경우 방법:

<div class="wordwrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit mi nibh, id sagittis tellus maximus eget. Mauris ut pharetra est, eu mattis quam.
</div>

로그인 후 복사

JavaScript 방법: