CSS를 사용하여 순수 영어 숫자의 자동 줄 바꿈 실현

다음은 순수 영어 숫자를 자동으로 래핑하는 CSS 코드의 간단한 구현입니다. 내용이 꽤 괜찮아서 지금 공유해서 참고용으로 올려드리겠습니다.

정의된 너비의 블록 요소가 순수 영어 또는 순수 숫자로 채워지면 IE 및 FF에서 컨테이너가 확대되고 자동으로 줄 바꿈되지 않습니다.

그리고 숫자 또는 영어에 중국어 문자가 포함된 경우 중국어에서 줄을 줄 바꿈합니다. 하지만 순수 한자는 자동으로 줄바꿈을 할 수 있습니다. 이 문제를 해결하는 방법? 먼저 두 주인공 word-wrap과 word-break에 대해 알아봅시다

word-wrap은 CSS 줄 바꿈을 제어하는 ​​데 사용됩니다

두 값:

(1) Normal
(2 ) break-word (이 값은 줄 바꿈을 강제하는 데 사용됩니다. 내용이 경계 내에서 끊어집니다. 중국어에는 문제가 없으며 영어 문장에는 문제가 없습니다. 단, 영어의 긴 문자열에는 작동하지 않습니다. .)

word-break는 단어 분리를 제어하는 ​​데 사용됩니다.

세 가지 값:

(1)normal

(2)break-all(단어를 분리하는 것입니다. 언제 단어가 경계에 도달하면 다음 문자가 자동으로 다음 줄로 이동합니다. 주로 영어의 긴 문자열 문제를 해결합니다. 한 줄에 고대시를 배열하는 데 사용할 수 있습니다~)

【해결 방법】

CSS에

word-wrap:break-word;
word-break:break-all;

을 추가할 수 있습니다. 위 내용이 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

CSS를 사용하여 페이지 콘텐츠의 가로 세로 비율을 유지하는 방법

css3 단위 vw 및 vh 사용 정보

위 내용은 CSS를 사용하여 순수 영어 숫자의 자동 줄 바꿈 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!