컨테이너를 더 크게 만드는 숫자와 문자 문제 해결

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

div 및 p와 같은 블록 수준 요소의 경우 일반 텍스트(아시아 텍스트 및 비아시아 텍스트) 요소의 줄 바꿈에는 기본 공백: 일반이 있으며 정의된 너비 다음에 자동으로 줄 바꿈됩니다.
HTML

CSS
#wrap{white-space:normal; 너비:200px }

1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자의 경우 word-wrap: break-word 또는 word-break:break-all을 사용하여 강제 줄 바꿈을 수행합니다.
#wrap{word-break:break-all; 폭:200px;}
또는
#wrap{word-wrap:break-word 폭:200px;}

효과: 줄 바꿈을 달성할 수 있습니다.

2. (Firefox 브라우저) 연속된 영어 문자와 아라비아 숫자의 줄바꿈 ​​모든 버전의 Firefox에서는 이 문제가 해결되지 않습니다. 경계를 초과하는 문자를 숨기거나 컨테이너에 스크롤 막대를 추가하는 것만 가능합니다.

#wrap{word-break:break-all; 너비:200px;자동;}

효과: 컨테이너가 정상이고 테이블의 내용이 숨겨집니다.
(1)(IE 브라우저) table-layout:fixed를 사용하여 테이블의 너비를 강제하고 초과 내용을 숨깁니다.
<테이블 스타일="테이블 레이아웃:고정" 너비="200">

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss



효과: 중복된 콘텐츠 숨기기
(2) (IE 브라우저) table-layout:fixed; 테이블의 너비, 내부 td를 강제로 사용 word-break: break-all 또는 word-wrap: break-word line break;
<테이블 너비="200" 스타일="테이블 레이아웃:고정;">

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890



효과: 줄 바꿈을 할 수 있습니다.

3. (IE 브라우저) td, th에 div, p 등을 중첩할 때는 위에서 언급한 div, p의 줄바꿈 ​​방법을 사용합니다.

4. (Firefox 브라우저) table-layout:fixed; 테이블의 너비, 내부 td를 강제하려면 word-break: break-all; 또는 word-wrap: break-word 줄 바꿈을 사용합니다. 숨김; 콘텐츠 너머에는 Overflow:auto가 작동하지 않습니다.

<테이블 스타일="테이블 레이아웃:고정" 너비="200">

abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz1234567890


효과: 내용 이상의 것을 숨깁니다.

5. (Firefox 브라우저) td, th 등의 Nest div, p 등 Firefox를 처리하려면 위에서 언급한 방법을 사용하십시오.