이 문서에서는 IE 및 FF와 호환되는 줄 바꿈에 권장되는 CSS 스타일을 나열하고 IE 및 FF와 호환되는 줄 바꿈에 권장되는 CSS 스타일의 차이점을 자세히 소개합니다
.
word-wrap:break-word; Overflow :hidden;
word-break:break-all;
대신
에
word
-wrap:break-word;
IE에서는 문제가 없습니다.. FF에서는 긴 문자열이 차단됩니다.
기술 요약:
줄바꿈을 사용하면
줄 바꿈이 강제로 실행됩니다. , 영어 문장에는 문제가 없습니다. 그러나 오랫동안 영어 단어를 문자열로 묶으면 작동
하지
않습니다
.
단어가 경계에 도달하면 자동으로 다음 줄로 이동합니다. 주로 영어 단어의 긴 문자열 문제를 해결합니다.
즉, 중국어, 일본어, 한국어만 사용합니다. 이번에는 단어 줄 바꿈이 없으며 중국어는 줄 바꿈이 되지 않습니다. (영어 문장은 정상입니다.)
IE에서는
word-wrap:break-word를 사용합니다
.FireFox에서는
이 두 가지를 사용하지 않으면
모든 것이 정상입니다.중국어는 문제가 없습니다. 하지만 긴 문자열 영어에서는 문제가 발생합니다.
word-wrap:break-word;word-break:break-all. ; 가 일반적으로 사용됩니다. 그러나 이 방법은 일반 영어 문장의 단어가 끊어지는 원인이 됩니다(IE 아래도 마찬가지입니다).
현재 주요 문제는 영어 단어의 긴 문자열이 끊어지는 것입니다. 영어의 문자열은 상대적으로 긴 단어일 뿐입니다. 즉, 영어 단어를 끊어야 할까요? 문제는 분명하고, 당연히 연결이 끊겨서는 안 됩니다. 악의적인 영어의 긴 문자열에 대해서는 당연히 걱정할 필요가 없습니다. 그러나 컨테이너가 확장되는 것을 방지할 수 있는 몇 가지 방법도 생각해 보아야 합니다.
사용:
overflow:auto; IE에서는 긴 문자열이 자동으로 래핑됩니다.
따라서 요약하면 word-wrap:break-word;overflow:hidden; Wrap:break -word;word-break:break-all;
word-wrap:break-word;overflow:auto; IE에서는 긴 문자열의 일부가 가려집니다.