CSS 자동 줄 바꿈_CSS/HTML

연속된 영문이나 숫자로 인해 컨테이너가 확장될 수 있으며 컨테이너 크기에 따라 자동으로 래핑할 수 없다는 것은 누구나 알고 있습니다. CSS로 래핑하는 방법은 다음과 같습니다.
div의 경우
1. (IE 브라우저) white-space:normal; 여기서 전자는 표준을 따릅니다.

#wrap{white-space:normal; 너비:200px; }
또는
#wrap{word-break:break-all;width:200px;}

ddd11111111111111111111111111111111

효과: 줄 바꿈 가능

2. (Firefox 브라우저) white-space:normal; word-break:break-all;overflow:hidden;Same FF에는 좋은 구현 방법이 없습니다. 스크롤 막대를 숨기거나 추가할 수만 있습니다. 물론 스크롤 막대를 추가하지 않는 것이 좋습니다!

#wrap{white-space:normal; width:200px; Overflow:auto;}
또는
#wrap{word-break:break-all;width:auto; }

DDD1111111111111111111111111111111111111111

효과: 컨테이너가 정상이고 테이블

에 대해 콘텐츠가 숨겨집니다

1. (IE 브라우저 ) 스타일을 사용하세요.

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890




효과: 줄 바꿈 가능
2. (IE 브라우저) table-layout:fixed 스타일을 사용하고 이제 랩

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

효과:

줄바꿈 가능 3. (IE 브라우저) 백분율을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용합니다


.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890
효과: 두 tds 모두 정상적으로 래핑됩니다 4. (Firefox 브라우저) td 크기를 고정하기 위해 백분율을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용하고 div를 사용합니다

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

여기서 셀 너비는 백분율로 정의해야 합니다효과: 일반 표시, 하지만 줄 바꿈할 수 없음(참고: FF 아래에서 컨테이너의 콘텐츠를 래핑하는 좋은 방법은 없습니다. 전체 효과에 영향을 주지 않기 위해 오버플로를 사용하여 추가 콘텐츠를 숨길 수만 있습니다)