>  기사  >  웹 프론트엔드  >  CSS(word-wrap/break)는 순수 영어 숫자를 자동으로 줄 바꿈합니다.

CSS(word-wrap/break)는 순수 영어 숫자를 자동으로 줄 바꿈합니다.

不言
不言원래의
2018-06-12 11:29:231796검색

이 글에서는 CSS(word-wrap/break)를 사용하여 순수 영어 숫자를 자동으로 감싸는 방법을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. IE와 FF 모두 큰 컨테이너는 자동으로 줄 바꿈되지 않으며 숫자나 영어에 한자가 있는 경우 한자부터 줄 바꿈하지만 이 문제를 해결하기 위해 이 문서에서는 자세한 해결 방법을 제공합니다. 관심 있는 친구들도 놓치지 마세요, 이 글이 도움이 되길 바랍니다

정의된 너비의 블록 요소에 순수 영어 또는 순수 숫자가 채워지면 IE 및 FF에서는 컨테이너가 확대되고 래핑되지 않습니다. 그리고 숫자나 영어에 한자가 있으면 한자부터 줄 바꿈되지만 순수 한자는 자동으로 줄 바꿈될 수 있습니다. 이 문제를 해결하는 방법? 두 주인공 word-wrap과 word-break에 대해 먼저 알아보겠습니다

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

단어 분리는 단어를 제어하는 ​​데 사용됩니다. break
세 가지 값: (. 1)normal
(2)break-all (단어를 분리합니다. 단어가 경계에 도달하면 다음 문자가 자동으로 다음 줄로 이동합니다. 주로 긴 영어 문자열의 문제를 해결합니다. .)
(3)keep-all (중국어, 일본어, 한국어가 한 줄에 한 문장씩 연속되는 단어를 의미하며, 고대 시를 배열하는 데 사용할 수 있습니다~)

【해결책】
추가할 수 있습니다

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

(1) CSS에서 break-all(중단 단어) 단어가 경계에 도달하면 다음 문자가 자동으로 다음 줄로 이동합니다. 이는 주로 긴 영어 문자열 문제를 해결합니다.) (2) keep-all (중국어, 일본어, 한국어 참고로 한 줄에 한 문장씩 사용 가능합니다. 고대시를 배열해 보세요~)

(3)break-word (줄 바꿈을 강제하는 데 사용되는 값입니다. 내용이 경계 내에서 끊어집니다. 는 중국어에는 문제가 없고, 영어 문장에는 문제가 없습니다. 하지만 영어의 긴 문자열에서는 작동하지 않습니다. )


위 내용은 모두의 학습에 도움이 되기를 바랍니다. . 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

CSS의 강제 줄 바꿈에서 단어 분리, 단어 줄 바꿈 및 공백의 차이점


위 내용은 CSS(word-wrap/break)는 순수 영어 숫자를 자동으로 줄 바꿈합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.