자동 줄 바꿈 문제 일반 문자의 줄 바꿈은 더 합리적이지만 연속된 숫자와 영어 문자는 컨테이너를 확장하는 경우가 많습니다. 이는 CSS에서 줄 바꿈을 구현하는 방법입니다.
p, p 및 기타 블록의 경우 레벨 요소
일반 텍스트 줄바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백:normal이 있으며 이는 정의된 너비
html
< id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义< /p >
#wrap{white-space:normal; width:200px; }
#wrap{word-break:break-all; width:200px;}
#wrap{word-wrap:break-word; width:200px;}
< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >
2. (Firefox 브라우저) 연속된 영어 문자 및 아라비아 숫자 줄 바꿈 , 모두 Firefox 버전은 이 문제를 해결하지 못했습니다. 경계 너머의 문자를 숨기거나 컨테이너
#wrap{word-break:break-all; width:200px; overflow:auto;}
< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >
1에서는 콘텐츠가 숨겨집니다. (IE 브라우징 브라우저) table-layout:fixed; 테이블의 너비를 강제하고 초과 내용을 숨깁니다
< style="table-layout:fixed" width="200"> <> <>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss < /td > < /tr > < /table >
2 (IE 브라우저) 강제로 table-layout:fixed를 사용합니다. 테이블 너비 및 내부 td, word-break: break-all; 또는 word-wrap: break-word; 줄바꿈
< width="200" style="table-layout:fixed;"> <> < width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890 < /td > < style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890 < /td > < /tr > < /table >
3. , p 등 td, th에서 위에서 언급한 p, p의 개행 방법을 사용합니다.
4. (Firefox 브라우저) 테이블의 너비를 강제로 지정하려면 table-layout:fixed를 사용하고, 내부 td에서는 단어를 사용합니다. -break: break-all; 또는 word-wrap: break- word; 줄 바꿈, 초과 내용을 숨기려면 Overflow:auto가 작동하지 않습니다.
< style="table-layout:fixed" width="200"> <> < width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890< /td > < width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890< /td > < /tr > < /table >
효과: 내용 이상 숨기기 5. (Firefox 브라우저) td, th, p 등의 Nest p는 위에서 언급한 방법을 채택하여 Firefox를 처리합니다
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!
관련 권장사항:
CSS를 사용하여 마우스를 올렸을 때 마스크 레이어를 구현하는 방법
CSS를 사용하여 다중 행 및 다중 열 레이아웃을 구현하는 방법에 대해
CSS 사용 방법 제목 텍스트의 긴 부분에 줄임표를 표시하려면
위 내용은 CSS는 자동 줄 바꿈을 실현하여 div가 레이아웃에 영향을 미치거나 깨지는 것을 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!