CSS가 영어와 연속 숫자의 자동 줄 바꿈을 구현하는 방법에 대한 자세한 설명

p 및 p와 같은 블록 수준 요소의 경우

　 일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백: 일반이 있으며 정의된 너비 이후에 자동으로 줄 바꿈됩니다.

　html<p id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</p>
　　css#wrap{white-space:normal; width:200px; }

　 1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자, word-wrap: break-word; 또는 word-break:break-all;을 사용하여 강제 줄 바꿈

　#wrap{word-break:break-all; width:200px;}

　또는

#wrap{word-wrap:break-word; width:200px;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

　 효과: 줄바꿈 가능 달성

　 2. (Firefox 브라우저) 연속되는 영어 문자와 아라비아 숫자의 줄 바꿈. 모든 Firefox 버전에서는 이 문제를 해결하지 못했습니다. 경계 너머로 문자를 숨기거나 컨테이너에 스크롤 막대를 추가하는 것뿐입니다.

#wrap{word-break:break-all; width:200px; overflow:auto;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

효과: 컨테이너는 정상이고 내용은 숨겨집니다

테이블용

　 1. (IE 브라우저) 테이블 레이아웃 사용: 테이블 너비를 강제로 고정, 중복된 내용은 숨겨짐

<table style="table-layout:fixed" width="200">　　
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>

　 효과: 중복 내용 숨기기

　 ​​2. (IE 브라우저) 테이블의 너비를 강제로 설정하고, 내부 td를 사용합니다. word-break: break-all 또는 word-wrap: break-word line break;

<table width="200" style="table-layout:fixed;">　　
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>

효과: 줄 바꿈 가능

3. (IE 브라우저) td, th에 p, p 등을 중첩하려면 위에서 언급한 p, p의 줄바꿈 ​​방법을 사용합니다

　　4. (Firefox 브라우저) 사용 table-layout: 테이블의 너비와 내부 td를 강제로 적용하려면 word -break: break-all; 또는 word-wrap: break-word line break를 사용하여 초과분을 숨깁니다. content, here Overflow:auto; 작동하지 않습니다

<table style="table-layout:fixed" width="200">　　
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>

　 효과: 내용 이상 숨기기

　5 .(Firefox 브라우저) td, th에서 Nest p, p 등을 처리하고 위에서 언급한 방법을 사용합니다. Firefox를 사용하여 코드 상자를 실행합니다. 마지막으로 이런 일이 일어날 가능성은 매우 적습니다.

위 내용은 CSS가 영어와 연속 숫자의 자동 줄 바꿈을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!