집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 강제 줄 바꿈 IE, Firefox 줄 바꿈

CSS 강제 줄 바꿈 IE, Firefox 줄 바꿈

高洛峰원래의: 2016-11-24 11:24:021384검색

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. (Firefox 브라우저) 연속된 영어 문자 및 아라비아 숫자의 줄 바꿈, 모두 Firefox 버전에서는 이 문제가 해결되지 않습니다. 문제는 경계를 초과하는 문자만 숨길 수 있거나 컨테이너에 스크롤 막대를 추가할 수 있다는 것입니다.

#wrap{word-break:break-all; Overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

효과: 컨테이너가 정상입니다. 내용은 숨겨집니다

🎜>

테이블의 경우

1. (IE 브라우저) table-layout:fixed를 사용하여 테이블의 너비를 강제로 조정하고 초과 내용을 숨깁니다.

효과: 중복된 콘텐츠 숨기기

2. (IE 브라우징 장치) table-layout: 테이블의 너비를 강제하기 위해 word-break: break-all; 또는 word-wrap: break-word line break

abcdefghigklmnopqrstuvwxyz 1234567890

🎜>

3. (IE 브라우저) td, th 등에 div, p 등을 중첩하고 위에서 언급한 div, p의 줄 바꿈 방식을 채택합니다.

4.(Firefox 브라우저) table-layout:fixed; 테이블의 너비를 강제로 지정하려면 word-break: break-all 또는 word-wrap: break-를 사용합니다. 줄 바꿈, 오버플로 사용: 콘텐츠 너머 숨기기, 오버플로:자동은 여기서 작동하지 않습니다.

효과: 내용 이상 숨기기

5. (Firefox 브라우저) 위에서 언급한 방법을 사용하여 div, p 등을 중첩합니다. in td, th 다음은 Firefox의 Run Code 상자를 처리하는 방법입니다. 마지막으로 이런 일이 일어날 가능성은 매우 적습니다.

성명：

이전 기사：텍스트 앞의 CSS 제어 작은 아이콘다음 기사：텍스트 앞의 CSS 제어 작은 아이콘

CSS 강제 줄 바꿈 IE, Firefox 줄 바꿈

관련 기사