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

CSS에서 word-break, word-wrap 및 공백의 차이점에 대한 예. 필요한 친구는

HTML 코드를 테스트용

<p class="c1">safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</p>
<p class=c1>This is all English. This is all English. This is all English.</p>
<p class=c1>全是中文的情况。全是中文的情况。全是中文的情况。</p>
<p class=c1>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</p>复制代码

을 참조하세요. 코드는 다음과 같습니다.

.c1{ width:300px;word-break:normal;border:1px solid red;}[object Object]

If 내용이 긴 영어 문자인 경우 문자열을 사용하면 IE6은 컨테이너를 열고 다른 브라우저는 오버플로만 하고 컨테이너를 열지 않습니다. Firefox에서는

코드는 다음과 같습니다.

.c1{ width:300px;word-break:break-all;border:1px solid red;}

IE6에서는 긴 영어 문자열과 긴 중국어 문장이 컨테이너를 열고, IE7과 IE8에서는 긴 영어 문자열만 바로 오버플로됩니다. 넘칠 것이다.

코드는 다음과 같습니다.

.c1{ width:300px;word-break:keep-all;border:1px solid red;}

첫번째 경우와 같습니다.
코드는 다음과 같습니다.

.c1{ width:300px;word-wrap:normal;border:1px solid red;}

모든 브라우저에는 줄 바꿈이 있습니다.

.c1{ width:300px;word-wrap:break-word;border:1px solid red;}

모두 IE6에서 열립니다. , IE7, IE8 및 Firefox에서는 모두 오버플로됩니다.

코드는 다음과 같습니다.

.c1{ width:300px;white-space:normal;border:1px solid red;}

7과 동일

위는 이 글의 전체 내용입니다. 모두의 학습에 도움이 되기를 바랍니다. 주의하시기 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 방문하세요!

관련 추천:

css 배경 설명:투명

위 내용은 CSS에서 단어 분리, 단어 줄 바꿈 및 공백의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!