> 웹 프론트엔드 > CSS 튜토리얼 > 웹 페이지의 콘텐츠를 자동으로 래핑하기 위해 CSS를 구현하는 방법

웹 페이지의 콘텐츠를 자동으로 래핑하기 위해 CSS를 구현하는 방법

黄舟
풀어 주다: 2016-12-14 16:50:27
원래의
1549명이 탐색했습니다.

숫자로 인해 컨테이너가 늘어날 수 있으며 컨테이너 크기에 따라 자동으로 래핑할 수 없습니다. CSS를 사용하여 숫자를 래핑하는 방법은 다음과 같습니다.

div의 경우

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

#wrap{white-space:normal; width:200px; }
또는
#wrap{word-break:break-all;width:200px;}

< ;div id="wrap">ddd111111111111111111111111111111111

효과: 줄바꿈 가능

2. (Firefox 브라우저) white-space:normal; - all;overflow:hidden; 마찬가지로 FF에는 좋은 구현 방법이 없습니다. 물론 스크롤 막대를 숨기거나 추가할 수는 없습니다.

#wrap{white-space:normal; width:200px; Overflow:auto;}
또는
#wrap{word-break:break-all;width:auto; }

ddd1111111111111111111111111111111111111

Effect: Container is normal, content is hidden

For table

1 . (IE 브라우저) table-layout:fixed;





abcdefghigklmnopqrstuvwxyz 1234567890

효과: 래핑 가능

2. (IE 브라우저) 스타일 table-layout 사용: 고정 및 nowrap



< ; td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890


효과: 포장 가능

3. tb{table-layout:fixed}




< ;td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890




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

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



abcdefghigklmnopqrstuvwxyz 1234567890




abcdefghigklmnopqrstuvwxyz 1234567890


abcdefghigklm nopqrstuvwxyz 1234567890


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

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

PHP 중국어 홈페이지(m.sbmmt.com) 관련 글도 더 주목해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿