긴 단어로 인해 DIV 레이아웃이 깨지는 것을 방지하려면 어떻게 해야 합니까?

긴 단어로 인해 Div가 깨지는 것을 방지

테이블 기반 레이아웃에서 DIV 기반 레이아웃으로 전환할 때 다음과 같은 일반적인 문제가 지속됩니다. DIV 열의 가장자리에 긴 단어가 보기 흉하게 쏟아져 나옵니다. 이 문제는 주요 웹사이트에도 영향을 미치며 일상적인 단어조차 길어질 수 있는 독일어와 같은 언어에서 특히 만연합니다.

해결책:

부드러운 하이픈

소프트 하이픈(­)을 사용하면 브라우저가 중단되어야 하는 위치를 지정할 수 있습니다. 긴 단어:

averyvery­longword

이 문자를 사용하면 브라우저에서 단어를 "averyverylongword" 또는 "averyvery-

longword"로 렌더링할 수 있습니다.

정규 표현식이 도움이 될 수 있습니다. 전략적으로 소프트 삽입 하이픈:

/([^\s-]{5})([^\s-]{5})/ → ­

요소

또는 HTML5 요소, 이전 IE-ism:

averyvery<wbr>longword

하이픈 없이 단어를 분리하여 "averyvery

긴 단어"가 됩니다.

CSS 하이픈

IE, Firefox, Safari 최신 버전에서 지원됩니다. Chrome), CSS 하이픈은 자동 하이픈 넣기를 활성화합니다.

div.breaking {
  hyphens: auto;
}

이 기능은 하이픈 넣기 사전에 의존하며 긴 단어가 항상 일관되게 끊어지는 것은 아닙니다.

오버플로 및 공백 : pre-wrap

다른 실행 가능한 솔루션에는 오버플로 제어 및 공백 설정이 포함됩니다. pre-wrap:

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

두 접근 방식 모두 긴 단어가 DIV 경계를 넘어 확장되는 것을 방지합니다.

위 내용은 긴 단어로 인해 DIV 레이아웃이 깨지는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!