<body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy ="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" marginheight="0" marginwidth="0">마우스 오른쪽 버튼 클릭 복사 프로그램 제거 이 글에서는 CSS를 사용하여 영어 텍스트를 자동으로 감싸는 방법을 소개합니다. 영어 또는 숫자가 연속되면 컨테이너가 확장되고 컨테이너 크기에 따라 자동으로 감싸질 수 없다는 것은 누구나 알고 있습니다. 연속된 영문이나 숫자는 컨테이너를 확장시킬 수 있으며 컨테이너의 크기에 따라 자동으로 래핑할 수 없다는 것은 누구나 알고 있습니다. CSS가 자동으로 래핑하는 방법은 다음과 같습니다. Div 및 테이블과 다른 브라우저의 경우 CSS 자동 줄 바꿈을 구현하는 방법이 약간 다릅니다. div용 1. (IE 브라우저) white-space:normal; word-break:break-all 여기서는 전자가 표준을 따릅니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 또는: #wrap{word-break:break-all;너비:200px;} 효과: 자동 줄 바꿈이 가능합니다. 2. (Firefox 브라우저) white-space:normal; word-break:break-all;overflow:hidden; FF에는 스크롤 막대를 숨기거나 추가할 수 있는 좋은 방법도 없습니다. 물론 스크롤 막대는 없습니다. 효과가 더 좋아요! div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 또는: #wrap{word-break:break-all;width:200px:auto; 효과: 컨테이너가 정상이고 내용이 숨겨집니다. 1. (IE 브라우저) table-layout:fixed 스타일을 사용하세요. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 효과: 자동으로 줄 바꿈 2. (IE 브라우저) 사용 스타일: div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 효과: 자동으로 줄 바꿈 3. (IE 브라우저) td 크기를 수정하기 위해 백분율을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용하십시오. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 효과: 두 TD 모두 정상적으로 자동으로 래핑됩니다. 4. (Firefox 브라우저) td 크기를 수정하기 위해 백분율을 사용할 때 table-layout:fixed 및 nowrap 스타일을 사용하고 div를 사용합니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 여기서 셀 너비는 백분율로 정의되어야 합니다. 정상적으로 표시되지만 줄바꿈할 수는 없습니다.
#wrap{white-space:normal; 너비:200px }
<div id="wrap">ddd111111111111111111111111111111</div>
#wrap{white-space:normal; 너비:200px;자동;}
<div id="wrap">ddd11111111111111111111111111111111111111</div>
http://font.knowsky.com/
테이블용
<스타일>
.tb{테이블 레이아웃:고정}
</style>
<테이블 클래스="tbl" 너비="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
<스타일>
.tb {테이블 레이아웃:고정}
</style>
<table class="tb" width="80"><tr><td 현재 랩>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
<스타일>
.tb{테이블 레이아웃:고정}
</style>
<테이블 클래스="tb" 너비=80>
<tr>
<td 너비=25% 현재 랩>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td 현재 랩>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
<스타일>
.tb {테이블 레이아웃:고정}
.td {오버플로:숨김;}
</style>
<테이블 클래스=tb 너비=80>
<tr><td 너비=25% 클래스=td 현재 랩>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>