CSS 웹 페이지 제작 시 자동 줄바꿈 구현 팁
저자：Eve Cole
업데이트 시간：2009-06-12 17:54:54
CSS 웹페이지 제작시 줄바꿈 자동 구현 팁 2009년 3월 6일 (금) 10:47 영문이나 숫자가 계속 연속되면 컨테이너가 늘어나서 컨테이너 크기에 따라 자동으로 줄 바꿈이 되지 않는다는 것은 누구나 다 아는 사실입니다. CSS 방식을 사용합니다!
div 1의 경우(IE 브라우저) white-space:normal; word-break:break-all; 여기서는 전자가 표준을 따릅니다. #wrap{white-space:normal; 너비:200px }
또는
#wrap{word-break:break-all;width:200px;}예:<div id="wrap">ddd1111111111111111111111111111111</div>효과: 줄바꿈이 가능합니다. 2. (Firefox 브라우저) white-space:normal; word -break:break-all;overflow:hidden; 마찬가지로 FF에는 좋은 구현 방법이 없습니다. 물론 스크롤 막대를 추가하거나 숨길 수는 없습니다. #wrap{white-space:normal; 너비:200px;자동;}
또는
#wrap{word-break:break-all;width:200px; Overflow:auto; 예.<div id="wrap">ddd111111111111111111111111111111111111</div> 효과: 컨테이너는 정상이고 테이블 1의 내용은 숨겨집니다. (IE 브라우저) table-layout:fixed 스타일을 사용합니다.
예:<스타일>
.tb{테이블 레이아웃:고정}
</style><table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>효과: 라인 2를 줄 바꿈할 수 있습니다. (IE 브라우저) 스타일 테이블 레이아웃을 사용합니다: 고정 및 현재 랩.<스타일>
.tb {테이블 레이아웃:고정}
</style><table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>효과: 래핑 가능 3. (IE 브라우저) td 크기를 수정하기 위해 백분율을 사용할 때 table-layout:fixed 및 nowrap<style> 스타일을 사용합니다. http://www.knowsky.com/
.tb{테이블 레이아웃:고정}
</style><table class="tb" width=80>
<tr>
<td 너비=25% 현재 랩>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table> 효과: 두 td가 모두 정상적으로 래핑됩니다. 3. (Firefox 브라우저) 백분율을 사용하여 td 크기를 수정하는 경우 table-layout:fixed 및 nowrap 스타일을 사용하고 diveg를 사용합니다.
.tb {테이블 레이아웃:고정}
.td {오버플로:숨김;}
</style><테이블 클래스=tb 너비=80>
<tr>
<td 너비=25% 클래스=td 현재 랩>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td 현재 랩>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table> 여기서 셀 너비는 백분율로 정의해야 합니다. 효과는 다음과 같습니다. 일반 표시, 줄 바꿈 없음(참고: FF 아래에서 컨테이너 콘텐츠를 래핑하는 좋은 방법은 없습니다. 오버플로를 사용하여 추가 내용을 숨길 수만 있습니다. 전반적인 효과에 영향을 미치지 않는 콘텐츠)
