이 문서에서는 IE 및 FF와 호환되는 줄 바꿈에 권장되는 CSS 스타일을 나열하고 단어 줄 바꿈과 단어 구분의 차이점을 자세히 설명합니다.
IE 및 FF와 호환되는 줄 바꿈 CSS 권장 스타일
가장 좋은 방법은
단어 줄바꿈:단어 중단; 오버플로:숨김;
대신에
단어 줄바꿈:단어 나누기; 단어 나누기:모두 나누기;
어느 것도 아니다
단어 줄바꿈:단어 중단; 오버플로:자동;
IE에서는 문제가 없지만 FF에서는 긴 영어 문자열이 내용을 벗어나 차단됩니다.
단어 줄 바꿈과 단어 나누기의 차이점
인용된 내용은 다음과 같습니다.
단어 줄 바꿈:
일반 기본값입니다. 콘텐츠가 컨테이너의 경계를 초과합니다.
break-word 내용은 다음 줄로 넘어가고 필요할 때 word-break가 발생합니다. 단어 분리:
일반 기본값은 단어 내에서 줄 바꿈을 허용합니다. 아시아 텍스트에만 작동하는 것 같습니다.
break-all 아시아 텍스트의 경우 일반과 동일하게 작동하지만 아시아가 아닌 텍스트의 경우 행을 임의로 구분할 수 있습니다. 이 값은 아시아가 아닌 텍스트의 일부 발췌가 포함된 아시아 텍스트에 적합합니다.
keep-all 중국어, 일본어 및 한국어에 대한 단어 분리를 허용하지 않습니다. 모든 비아시아 언어에 대해 일반적인 방식으로 작동합니다. 이 값은 중국어, 일본어 또는 한국어가 소량 포함된 텍스트에 최적화되어 있습니다. |
요약은 다음과 같습니다.
word-wrap은 줄 바꿈을 제어합니다.
break-word를 사용하면 줄 바꿈이 강제로 적용됩니다. 중국어도 문제 없고, 영어 문장도 문제 없습니다. 그러나 긴 영어 문자열의 경우에는 작동하지 않습니다.
break-word는 단어를 분리할지 여부를 제어합니다.
Normal이 기본 상황이며, 영어 단어는 분리되지 않습니다.
break-all은 브레이크 단어입니다. 단어가 경계에 도달하면 다음 문자가 자동으로 다음 줄로 이동합니다. 주로 긴 영어 문자열 문제를 해결합니다.
keep-all은 중국어, 일본어, 한국어 연속어를 의미합니다. 즉, 줄 바꿈 없이 이번에만 사용하면 중국어는 줄 바꿈이 되지 않습니다. (영어문장은 정상입니다.)
즉, 아래:
word-wrap:break-word;를 사용하면 모두 잘 작동합니다.
다음:
이 두 가지만 사용하지 않는다면 중국어에는 아무런 문제가 없습니다. 영어 문장에도 문제가 없을 것입니다. 그러나 영어로 된 긴 문자열은 문제를 일으킬 수 있습니다.
영어의 긴 문자열을 풀기 위해서는 일반적으로 word-wrap:break-word;word-break:break-all;을 사용합니다. 하지만 이 방법을 사용하면 일반 영어 문장의 단어 연결이 끊어지게 됩니다(ie도 마찬가지).
현재 주요 문제는 긴 영어 문자열과 영어 단어의 연결이 끊어지는 데 존재합니다. 사실 영어에서 긴 문자열은 상대적으로 긴 단어일 뿐입니다.
즉, 영어 단어는 단절되어야 하는가? 문제는 명백하며 연결을 끊어서는 안됩니다.
영어로 긴 문자열의 경우 악성이므로 당연히 걱정할 필요는 없습니다. 하지만 컨테이너가 확장되는 것을 방지할 수 있는 몇 가지 방법도 생각해야 합니다.
사용: Overflow:auto; 즉, 긴 문자열이 자동으로 줄바꿈됩니다. ff, 긴 문자열이 포함됩니다.
요약하자면, 가장 좋은 방법은 word-wrap:break-word;word-break:break-all;보다는 word-wrap:break-word;overflow:hidden;입니다.
word-wrap:break-word;overflow:auto; IE에서는 문제가 없습니다. ff에서는 긴 문자열이 부분적으로 가려집니다.
또한 테스트 코드는 다음과 같습니다.
인용된 내용은 다음과 같습니다.
1.htm============================================== = ==================== <스타일>
.c1{ 너비:300px; 테두리:1px 단색 빨간색}
.c2{ 너비:300px;word-wrap:break-word 테두리:1px 단색 노란색}
.c3{ 너비:300px;word-wrap:break-word;word-break:break-all; 1px 단색 녹색}
.c4{ 너비:300px;word-wrap:break-word;word-break:keep-all; 1px 단색 파란색}
.c5{ 너비:300px;word-break:break-all; 테두리:1px 단색 검정}
.c6{ 너비:300px;word-break:keep-all; 테두리:1px 단색 빨간색}
.c7{ 너비:300px;word-wrap:break-word;overflow:auto; 단색 노란색}
</style> .c1{ 너비:300px; 테두리:1px 단색 빨간색}
<div 클래스="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c1>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c1>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c1>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> <br>
.c2{ 너비:300px;word-wrap:break-word 테두리:1px 단색 노란색}
<div 클래스="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c2>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c2>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c2>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> <br>
.c3{ 너비:300px;word-wrap:break-word;word-break:break-all; 1px 단색 녹색}
<div 클래스="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c3>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c3>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c3>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> <br>
.c4{ 너비:300px;word-wrap:break-word;word-break:keep-all; 1px 단색 파란색}
<div 클래스="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c4>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c4>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c4>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> <br>
.c5{ 너비:300px;word-break:break-all; 테두리:1px 단색 검정}
<div 클래스="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c5>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c5>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c5>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> <br>
.c6{ 너비:300px;word-break:keep-all; 테두리:1px 단색 빨간색}
<div 클래스="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c6>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c6>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c6>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> <br>
.c7{ 너비:300px;word-wrap:break-word;overflow:auto 테두리:1px 단색 노란색}
<div 클래스="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div 클래스=c7>
이것은 모두 영어입니다. 이것은 모두 영어입니다.
</div>
<div 클래스=c7>
모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다. 모두 중국어로 되어있습니다.
</div>
<div 클래스=c7>
중국어와 영어의 혼합 배열입니다. 중국어와 영어의 혼합 배열. 중국어와 영어.
</div> |
