CSS 강제 줄 바꿈 IE, Firefox 줄 바꿈
- 高洛峰원래의
- 2016-11-24 11:24:021357검색
div 및 p와 같은 블록 수준 요소의 경우
일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백:일반이 있으며 정의된 텍스트 다음에 자동으로 줄 바꿈됩니다. width:
html
일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소는 정의된 경우 기본 공백:일반을 갖습니다. ;/div>
css
#wrap{white-space:normal; width:200px }
1. (IE 브라우저) 영어 문자 및 아라비아 숫자의 경우 word-wrap: break-word; 또는 word-break:break-all;을 사용하여 강제 줄 바꿈을 수행합니다.
#wrap{word-break:break -all; 너비:200px ;}
또는
#wrap{word-wrap:break-word;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< / div>
효과: 중복된 콘텐츠 숨기기 2. (IE 브라우징 장치) table-layout: 테이블의 너비를 강제하기 위해 word-break: break-all; 또는 word-wrap: break-word line break
🎜> 3. (IE 브라우저) td, th 등에 div, p 등을 중첩하고 위에서 언급한 div, p의 줄 바꿈 방식을 채택합니다. 4.(Firefox 브라우저) table-layout:fixed; 테이블의 너비를 강제로 지정하려면 word-break: break-all 또는 word-wrap: break-를 사용합니다. 줄 바꿈, 오버플로 사용: 콘텐츠 너머 숨기기, 오버플로:자동은 여기서 작동하지 않습니다.
효과: 줄 바꿈 가능
2. (Firefox 브라우저) 연속된 영어 문자 및 아라비아 숫자의 줄 바꿈, 모두 Firefox 버전에서는 이 문제가 해결되지 않습니다. 문제는 경계를 초과하는 문자만 숨길 수 있거나 컨테이너에 스크롤 막대를 추가할 수 있다는 것입니다.
#wrap{word-break:break-all; Overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
효과: 컨테이너가 정상입니다. 내용은 숨겨집니다
🎜>
테이블의 경우 1. (IE 브라우저) table-layout:fixed를 사용하여 테이블의 너비를 강제로 조정하고 초과 내용을 숨깁니다.| abcdefghigklmnopqrstuvwxyz 1234567890 | 0