>웹 프론트엔드 >CSS 튜토리얼 >영어 단어 또는 Chinese_Experience 교환으로 인해 표가 확대되는 것을 방지하기 위해 CSS를 사용하여 표나 셀을 제어하여 강제로 줄 바꿈을 수행합니다.

영어 단어 또는 Chinese_Experience 교환으로 인해 표가 확대되는 것을 방지하기 위해 CSS를 사용하여 표나 셀을 제어하여 강제로 줄 바꿈을 수행합니다.

WBOY
WBOY원래의
2016-05-16 12:04:142213검색
div 및 p와 같은 블록 수준 요소의 경우
일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백:일반이 있으며 정의된 너비 다음에 자동으로 줄 바꿈됩니다.
html
일반 텍스트 줄 바꿈(아시아 및 비아시아 텍스트) 요소는 정의 시 기본 공백:일반을 갖습니다.

css
#wrap{white-space: Normal; width :200px; }
1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자의 경우 word-break:break-all;을 사용하여 강제 줄 바꿈을 수행합니다. #wrap{word -break:break-all; 너비:200px;}
또는
#wrap{word-wrap:break-word; 너비:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
효과: 줄 바꿈 가능
2. (Firefox 브라우저) 연속된 영어 문자와 아라비아 숫자의 줄 바꿈은 모든 버전의 Firefox에서 이 문제를 해결하지 못합니다. 경계 너머의 문자를 숨기거나 스크롤을 추가하는 것뿐입니다.
#wrap{word-break:break-all; width:200px; Overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
효과: 컨테이너는 정상, 콘텐츠는 숨겨짐
테이블용
1 . (IE 브라우저) 테이블의 너비를 강제로 조정하고 초과 내용을 숨기려면 table-layout:fixed를 사용하세요.





abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss







abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890
효과: 중복된 콘텐츠 숨기기
2. 브라우저) table-layout:fixed; 테이블의 너비를 강제하려면 word-break: break-all; 또는 word-wrap: break-word line break


abcdefghigklmnopqrstuvwxyz 1234567890




abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890
td>
abcdefghigklmnopqrstuvwxyz 1234567890
효과: 줄 바꿈 가능합니다3. (IE 브라우저) td, Nested div, p 등에서는 위에서 언급한 div 및 p의 줄 바꿈 방법을 사용합니다 4. (Firefox 브라우저) 테이블 레이아웃 사용: 고정; 테이블의 너비와 내부 td를 강제로 적용하려면 word-break : break-all; 또는 word-wrap : break-word; line break를 사용하여 초과 내용을 숨기세요. Overflow:auto; 여기서는 작동하지 않습니다
abcdefghigklmnopqrstuvwxyz1234567890
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.