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 중국어 웹사이트의 기타 관련 기사를 참조하세요!