집 >웹 프론트엔드 >CSS 튜토리얼 >CSS는 자동 줄 바꿈을 실현하여 div가 레이아웃에 영향을 미치거나 깨지는 것을 방지합니다.

CSS는 자동 줄 바꿈을 실현하여 div가 레이아웃에 영향을 미치거나 깨지는 것을 방지합니다.

不言원래의: 2018-06-21 15:55:542113검색

자동 줄 바꿈 문제 일반 문자의 줄 바꿈은 더 합리적이지만 연속된 숫자와 영어 문자는 컨테이너를 확장하는 경우가 많습니다. 이는 CSS에서 줄 바꿈을 구현하는 방법입니다.

p, p 및 기타 블록의 경우 레벨 요소
일반 텍스트 줄바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백:normal이 있으며 이는 정의된 너비
html

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

css

#wrap{white-space:normal; width:200px; }

1 이후에 자동으로 줄 바꿈됩니다.(IE 브라우저) 연속되는 영어 문자 및 아라비아 숫자의 경우 단어 -wrap: break를 사용합니다. -word; 또는 word-break:break-all; 강제 줄 바꿈을 달성하려면

#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는 자동 줄 바꿈을 실현하여 div가 레이아웃에 영향을 미치거나 깨지는 것을 방지합니다.

관련 기사