긴 단어로 인해 div가 손상되는 것을 어떻게 방지할 수 있나요?

때때로 개발자는 웹 페이지에 긴 단어를 표시해야 할 때가 있습니다. 예를 들어 표시 URL, 긴 파일 이름 등이 있습니다. 때로는 단어 길이가 상위 컨테이너의 길이보다 길어서 단어가 컨테이너를 파괴하는 경우도 있습니다.

예를 들어, 파일 세부 정보를 표시하기 위해 카드를 만들었고 파일 이름이 너무 길어서 카드가 깨질 수 있고 항상 보기에 더 안 좋습니다. 따라서 개발자는 긴 단어를 래핑하여 div 요소가 손상되는 것을 방지해야 합니다.

솔루션을 시작하기 전에 예를 통해 문제를 이해해 봅시다.

예제 1(긴 단어 분해 div)

아래 예에서는 div 요소를 생성하고 div 요소 내에 "p" 요소를 추가했습니다. 또한 "p" 요소의 텍스트에 긴 단어를 추가했습니다.

CSS에서는 div 요소의 고정 크기를 설정합니다. 출력에서 사용자는 단어가 div 요소를 분리하고 여기에서 오버플로되는 시점을 관찰할 수 있습니다.

으아악

단어 분리 CSS 속성을 사용하여 단어 분리

이 방법에서는 단어가 div 요소를 깨뜨리는 것을 방지하기 위해 “word-break” CSS 속성을 사용합니다. "단어 분리" 속성을 사용하면 단어가 컨테이너 너비를 초과할 때 단어를 어떻게 분리해야 하는지 결정할 수 있습니다.

단어를 깨기 위해서는 다른 값이 필요합니다. "normal" 값은 지정된 중단점(예: 공백, 하이픈 등)에서만 단어를 나눕니다. "break-all" 값은 오버플로되는 문자에서 단어를 끊고, "keep-all" 값은 단어를 끊지 않습니다. 단어.

여기에서는 "break-all" 값을 사용하여 단어와 문자를 구분합니다.

문법

사용자는 다음 구문에 따라 "word-break" CSS 속성을 사용하여 긴 단어가 div 요소를 깨뜨리는 것을 방지할 수 있습니다.

으아악

예 2(긴 단어로 인해 div가 깨지는 것을 방지)

아래 예에서는 컨테이너 div 요소 내부에 첫 번째 예에서 추가한 긴 단어를 추가했습니다. CSS에서는 단어가 div 요소를 깨뜨리는 것을 방지하기 위해 "word-break" 속성과 "break-all" 값을 사용합니다.

출력에서 단어가 특정 문자에서 분리되고 단어의 나머지 문자가 다음 줄에 표시되는 것을 볼 수 있습니다.

으아악

Overflow-wrap 속성 사용

"overflow-wrap" 속성을 사용하면 요소의 콘텐츠가 상위 요소에서 오버플로될 때 요소의 콘텐츠를 어떻게 래핑해야 하는지 결정할 수 있습니다. "overflow-wrap" 속성의 "break-word" 값을 사용하면 긴 단어가 래핑으로 인해 div 요소가 깨지는 것을 방지할 수 있습니다.

문법

사용자는 "overflow-wrap" CSS 속성을 사용하여 다음 구문에 따라 긴 단어를 래핑할 수 있습니다.

으아악

예 3

아래 예에서는 "p" 요소의 텍스트로 매우 긴 단어를 추가했습니다. 그런 다음 상위 요소의 "overflow-wrap" 속성을 사용하여 단어를 분리하여 오버플로된 내용을 다음 줄로 래핑합니다.

출력에서 단어가 중간에 끊어지고 나머지 문자가 다음 줄에 표시되는 것을 볼 수 있습니다.

으아악

예제 4(JavaScript를 사용하여 Overflow-wrap 속성 설정)

때로는 긴 단어로 인해 div가 깨지는 것을 방지하기 위해 JavaScript를 사용해야 할 때가 있습니다. 예를 들어, 데이터베이스에서 제품 데이터를 가져옵니다. 제품 이름이 매우 긴 경우 특정 제품에 대한 "overflow-wrap" 속성을 사용하여 긴 제품 이름을 래핑할 수 있습니다.

JavaScript에서는 HTML 요소에 액세스하고 스타일 개체의 "overflowWrap" 속성을 사용하여 긴 단어가 div 요소를 손상시키는 것을 방지할 수 있습니다.

으아악

사용자는 긴 단어가 div 요소를 손상시키는 것을 방지하기 위해 다양한 CSS 속성을 사용하는 방법을 배웠습니다. 첫 번째 방법에서는 "단어 분리" CSS 속성을 사용하여 브라우저가 단어를 분리하는 방법을 지정합니다. 두 번째 접근 방식에서는 "overflow-wrap" CSS 속성을 사용하여 div 요소 콘텐츠의 오버플로를 처리하는 방법을 지정합니다.

위 내용은 긴 단어로 인해 div가 손상되는 것을 어떻게 방지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!