자동 줄 바꿈 문제, 일반 문자의 줄 바꿈이 더 합리적이지만 연속된 숫자와 영어 문자가 컨테이너를 확장하는 경우가 많아 상당히 골치 아픈 문제입니다. CSS에서 줄 바꿈을 구현하는 방법은 다음과 같습니다.
div 및 p와 같은 블록 수준 요소의 경우 일반 텍스트(아시아 텍스트 및 비아시아 텍스트) 요소의 줄 바꿈에는 기본 공백: 일반이 있으며 정의된 너비 다음에 자동으로 줄 바꿈됩니다.
HTML
<div id="wrap">정의된 경우 일반 텍스트 줄 바꿈(아시아 및 비아시아 텍스트) 요소에는 기본 공백:일반이 있습니다.</div>
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;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
효과: 줄 바꿈을 달성할 수 있습니다.
2. (Firefox 브라우저) 연속된 영어 문자와 아라비아 숫자의 줄바꿈 모든 버전의 Firefox에서는 이 문제가 해결되지 않습니다. 경계를 초과하는 문자를 숨기거나 컨테이너에 스크롤 막대를 추가하는 것만 가능합니다.
#wrap{word-break:break-all; 너비:200px;자동;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
효과: 컨테이너가 정상이고 테이블의 내용이 숨겨집니다.
(1)(IE 브라우저) table-layout:fixed를 사용하여 테이블의 너비를 강제하고 초과 내용을 숨깁니다.
<테이블 스타일="테이블 레이아웃:고정" 너비="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
효과: 중복된 콘텐츠 숨기기
(2) (IE 브라우저) table-layout:fixed; 테이블의 너비, 내부 td를 강제로 사용 word-break: break-all 또는 word-wrap: break-word line break;
<테이블 너비="200" 스타일="테이블 레이아웃:고정;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
효과: 줄 바꿈을 할 수 있습니다.
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">
<tr>
<td width="25%" style="word-break : break-all; Overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; 오버플로:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
효과: 내용 이상의 것을 숨깁니다.
5. (Firefox 브라우저) td, th 등의 Nest div, p 등 Firefox를 처리하려면 위에서 언급한 방법을 사용하십시오.