CSS를 사용하여 영어 단어의 줄 바꿈을 강제하는 코드

이 글은 CSS를 사용하여 영어 단어의 줄 바꿈을 강제하는 코드를 주로 소개합니다. 이제 특정 참조 값이 있으므로 필요한 친구들이 참조할 수 있습니다. 기업 영어 버전의 웹사이트: 영어 단어의 공간이 부족하여 전체 단어가 줄바꿈되어 단어 사이의 간격이 너무 커져 레이아웃의 미학에 직접적인 영향을 미칩니다. 관심 있는 친구들은 이 문제를 어떻게 해결해야 합니까? 이 글이 도움이 될 것 같네요

회사 홈페이지 영문판을 만들 때, 영어 단어의 여백이 부족하여 전체 단어가 줄바꿈되어 단어 사이의 간격이 너무 커졌습니다. 아래와 같이

:

css 속성을 사용한 후의 효과

word-break:break-all;

: 아래와 같이:

줄바꿈 없음을 강제 적용

{ 
white-space:nowrap; 
}

자동 줄바꿈

{ word-wrap: break-word; word-break: normal; }

영어 단어 줄바꿈 강제

{ 
word-break:break-all; 
}

CSS 설정에서 줄바꿈하지 않도록 설정:

overflow: 숨김 숨기기 white-space: 일반 기본값
pre 줄 바꿈 및 기타 공백 문자는 보호됩니다.
nowrap 텍스트가 끝나거나 br 개체가 나타날 때까지 모든 텍스트가 같은 줄에 표시되도록 합니다.

강제 줄 바꿈 설정:
단어 나누기: normal; -아시아 언어, 단어 내에서는 줄 바꿈이 허용됩니다.
break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
keep-all : 모든 비아시아 언어에 대한 일반 값과 ​​동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 매우 적합한 솔루션입니다.

영어는 줄바꿈하지 않습니다.
문제를 해결하려면 CSS에 word-break: break-all;을 추가하세요. 이 문제는 IE에서만 발생합니다. FF에서 테스트하면 효과에 영향을 주지 않는 스크롤 막대가 추가될 수 있습니다. 본문에 word-break: break-all;을 추가하는 것을 권장합니다. 이렇게 하면 IE의 프레임이 차단되는 문제를 해결할 수 있습니다. 다음은 word-break에 대한 설명을 인용한 것입니다. word-break는 IE5+
의 고유 속성입니다. 구문:

word-break : normal | break-all | keep-all

매개변수:
normal: 아시아 언어 및 비아시아 언어의 텍스트 규칙에 따라 단어 내 줄 바꿈이 허용됩니다.

break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.

keep-all : 모든 비아시아 언어에 대한 일반 값과 ​​동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 적합합니다.
설명:
개체 내의 텍스트에 대한 단어 내 줄 바꿈 동작을 설정하거나 검색합니다. 특히 여러 언어가 나타날 때.
중국어의 경우 break-all을 사용해야 합니다.
해당 스크립트 기능은 wordBreak입니다. 제가 쓴 다른 책들도 참조해 주세요.
예:

{word-break : break-all; }

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS 목록 순위의 특수 효과를 구현하는 방법
CSS3 클릭 버튼을 사용하여 배경 그라데이션 애니메이션 효과를 얻으세요

위 내용은 CSS를 사용하여 영어 단어의 줄 바꿈을 강제하는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!