자동 줄 바꿈 문제, 일반 문자의 줄 바꿈이 더 합리적이지만 연속된 숫자와 영어 문자가 컨테이너를 확장하는 경우가 많아 상당히 골치 아픈 문제입니다. CSS에서 줄 바꿈을 구현하는 방법은 다음과 같습니다. 줄 바꿈을 정의하는 최고의 CSS .wrap { 테이블 레이아웃:고정; 단어 나누기: 모두 중단; 숨김 } 1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자의 경우 word-wrap: break-word 또는 word-break:break-all을 사용하여 강제 줄 바꿈을 수행합니다. #wrap{word-break:break-all; 폭:200px;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 효과: 줄 바꿈을 달성할 수 있습니다. 2. (Firefox 브라우저) 연속된 영어 문자와 아라비아 숫자의 줄바꿈 모든 버전의 Firefox에서는 이 문제가 해결되지 않습니다. 경계를 초과하는 문자를 숨기거나 컨테이너에 스크롤 막대를 추가하는 것만 가능합니다. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 효과: 컨테이너가 정상이고 내용이 숨겨집니다. 테이블용 <테이블 스타일="테이블 레이아웃:고정" 너비="200"> 효과: 중복된 콘텐츠 숨기기 2. (IE 브라우저) table-layout:fixed;를 사용하여 테이블 너비를 강제하고 내부 td에서는 word-break: break-all 또는 word-wrap: break-word; <테이블 너비="200" 스타일="테이블 레이아웃:고정;"> 효과: 줄 바꿈을 할 수 있습니다. 3. (IE 브라우저) td, th에 div, p 등을 중첩할 때는 위에서 언급한 div, p의 줄 바꿈 방법을 사용합니다. 4. (Firefox 브라우저) table-layout:fixed; 테이블의 너비, 내부 td를 강제하려면 word-break: break-all; 또는 word-wrap: break-word 줄 바꿈을 사용합니다. 숨김; 콘텐츠 너머에는 Overflow:auto가 작동하지 않습니다. 효과: 내용 이상의 것을 숨깁니다. 5. (Firefox 브라우저) td, th 등의 Nest div, p 등 위에서 언급한 방법을 사용하여 Firefox를 처리하여 코드 상자를 실행합니다. 마지막으로 이러한 현상이 발생할 가능성은 매우 적지만 네티즌들은 다음과 같이 말했습니다. 장난도 배제할 수 없습니다. 언급된 예시의 효과는 다음과 같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE word-wrap : break-word ;</code></h1> <h1><code>Firefox/ word-break:break-all; 오버플로:자동;</code></h1>
여기서 오버플로: 숨김 또는 자동;
================================================= ===============
div 및 p와 같은 블록 수준 요소의 경우 일반 텍스트(아시아 텍스트 및 비아시아 텍스트) 요소의 줄 바꿈에는 기본 공백: 일반이 있으며 정의된 너비 다음에 자동으로 줄 바꿈됩니다.
HTML
<div id="wrap">정의된 경우 일반 텍스트 줄 바꿈(아시아 및 비아시아 텍스트) 요소에는 기본 공백:일반이 있습니다.</div>
CSS
#wrap{white-space:normal; 너비:200px }
또는
#wrap{word-wrap:break-word 폭:200px;}
#wrap{word-break:break-all; 너비:200px;자동;}
1. (IE 브라우저) table-layout:fixed를 사용하여 테이블 너비를 강제하고 초과 내용을 숨깁니다.
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
<테이블 스타일="테이블 레이아웃:고정" 너비="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>
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>문자 줄 바꿈</title>
<스타일 유형="텍스트/css">
table,td,th,div { 테두리:1px 녹색 실선;}
코드 { 글꼴 계열:"Courier New", Courier, 고정 폭;}
</style>
</head>
<본문>
<h1><code>div</code></h1>
<h1><code>모두 공백:일반;</code></h1>
<div style="white-space:normal; width:200px;">noWrap 속성이 true입니다. 따라서 이 시나리오에서는 WIDTH 속성이 noWrap 속성보다 우선합니다.</div>
<div style="word-wrap : break-word ; 너비:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; 너비:200px; 오버플로:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>테이블</code></h1>
<h1><code>테이블 레이아웃:고정;</code></h1>
<테이블 스타일="테이블 레이아웃:고정" 너비="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss</td>
</tr>
</table>
<h1><code>테이블 레이아웃:고정; 단어 나누기: 모두 나누기; 단어 줄 바꾸기: 나누기 단어 ;</code></h1>
<테이블 너비="200" 스타일="테이블 레이아웃:고정;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss</td>
</tr>
</table>
<h1><code>FF 테이블 레이아웃:고정; 오버플로:숨김;</code></h1>
<테이블 스타일="테이블 레이아웃:고정" 너비="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>
</body>
</html>