div 및 p와 같은 블록 수준 요소의 경우 일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백:일반이 있으며 정의된 너비 다음에 자동으로 줄 바꿈됩니다.
html
일반 텍스트 줄 바꿈(아시아 및 비아시아 텍스트) 요소는 정의 시 기본 공백:일반을 갖습니다.
css
#wrap{white-space: Normal; width :200px; }
1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자의 경우 word-break:break-all;을 사용하여 강제 줄 바꿈을 수행합니다. #wrap{word -break:break-all; 너비:200px;}
또는
#wrap{word-wrap:break-word; 너비:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
효과: 줄 바꿈 가능
2. (Firefox 브라우저) 연속된 영어 문자와 아라비아 숫자의 줄 바꿈은 모든 버전의 Firefox에서 이 문제를 해결하지 못합니다. 경계 너머의 문자를 숨기거나 스크롤을 추가하는 것뿐입니다.
#wrap{word-break:break-all; width:200px; Overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
효과: 컨테이너는 정상, 콘텐츠는 숨겨짐
테이블용
1 . (IE 브라우저) 테이블의 너비를 강제로 조정하고 초과 내용을 숨기려면 table-layout:fixed를 사용하세요.
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
|
abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss
|
abcdefghigklmnopqrstuvwxyz 1234567890
|
abcdefghigklmnopqrstuvwxyz 1234567890
|
효과: 중복된 콘텐츠 숨기기
2. 브라우저) table-layout:fixed; 테이블의 너비를 강제하려면 word-break: break-all; 또는 word-wrap: break-word line break
abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz1234567890 |
abcdefghigklmnopqrstuvwxyz1234567890 |
td> |
abcdefghigklmnopqrstuvwxyz 1234567890 |
효과: 줄 바꿈 가능합니다3. (IE 브라우저) td, Nested div, p 등에서는 위에서 언급한 div 및 p의 줄 바꿈 방법을 사용합니다 4. (Firefox 브라우저) 테이블 레이아웃 사용: 고정; 테이블의 너비와 내부 td를 강제로 적용하려면 word-break : break-all; 또는 word-wrap : break-word; line break를 사용하여 초과 내용을 숨기세요. Overflow:auto; 여기서는 작동하지 않습니다
abcdefghigklmnopqrstuvwxyz1234567890 | |