CSS는 자동 줄 바꿈을 구현합니다.

저자：Eve Cole 업데이트 시간：2009-05-31 00:37:31

연속된 영문이나 숫자로 인해 컨테이너가 확장될 수 있으며 컨테이너 크기에 따라 자동으로 래핑할 수 없다는 것은 누구나 알고 있습니다. CSS를 사용하여 래핑하는 방법은 다음과 같습니다.

div용

1. (IE 브라우저) white-space:normal; word-break:break-all 여기서는 전자가 표준을 따릅니다.

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

또는

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

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

2. (Firefox 브라우저) white-space:normal; word-break:break-all;overflow:hidden; FF에는 스크롤 막대를 숨기거나 추가할 수 있는 좋은 방법도 없습니다. 물론 스크롤 막대는 없습니다. 효과가 더 좋아요!

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

또는

#wrap{word-break:break-all;width:200px:auto;

효과: 컨테이너가 정상이고 내용이 숨겨집니다.

테이블용

1. (IE 브라우저) table-layout:fixed 스타일을 사용합니다.

인용된 내용은 다음과 같습니다.

<스타일>
.tb{테이블 레이아웃:고정}
</style>

<테이블 너비="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

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

2. (IE 브라우저) 테이블 레이아웃 스타일 사용: 고정 및 현재 랩

인용된 내용은 다음과 같습니다.

<스타일>
.tb {테이블 레이아웃:고정}
</style>

<테이블 너비="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

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

3. (IE 브라우저) td 크기를 수정하기 위해 백분율을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용합니다.

인용된 내용은 다음과 같습니다.

<스타일>
.tb{테이블 레이아웃:고정}
</style>

<테이블 너비=80>
<tr>
<td 너비=25% 현재 랩>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

효과: 두 TD 모두 정상적으로 래핑됩니다.

4. (Firefox 브라우저) td 크기를 고정하기 위해 백분율을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용하고 div를 사용합니다.

인용된 내용은 다음과 같습니다.

<스타일>
.tb {테이블 레이아웃:고정}
.td {오버플로:숨김;}
</style>

<테이블 너비=80>
<tr>
<td 너비=25% 현재 랩>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td 지금 랩>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>

여기서 셀 너비는 백분율로 정의되어야 합니다.

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