Div + css 구현 하 긴 영어 편지 단어 랩

자동 줄 바꿈이 문제, 라인의 일반 문자 더 적당 하 고, 그리고 연속 숫자 및 영문자 종종 대형 컨테이너, 꽤 두통 될 것입니다, 그리고 다음은 CSS 줄 바꿈이 메서드를 구현 하는 방법을

최고의 CSS 정의 선 브레이크 코드

. 랩 {테이블-레이아웃: 고정; 단어-휴식: 휴식-모두; 오버플로우: 숨겨진;}
여기 오버플로: 숨겨진 또는 자동;
=================================================================

Div, p 등의 블록 수준 요소에 대 한
일반 텍스트 (아시아 및 비 아시아 텍스트) 요소의 배치는 기본 흰색-공간: 보통, 너비 정의 될 때 자동으로 싸여 있다
html
< div id = "랩" > 일반 텍스트 배치 (아시아 및 비 아시아 텍스트) 요소는 기본 흰색-공간: 정상, 정의 < / div >
css
#wrap {흰색-공간: 일반; 너비: 200px;}

1. (ie 브라우저) 연속 영문자와 아라비아 숫자, 단어를 사용 하 여-랩: 휴식-단어 또는 단어-휴식: 휴식-모든;

#wrap {단어-휴식: 휴식-모든; 너비: 200px;}
또는
#wrap {단어-랩: 휴식-단어; 너비: 200px;}

< div id = "랩" > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 < / div >

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

2. (Firefox 브라우저) 연속 영문자와 아라비아 숫자 휴식, Firefox의 모든 버전이이 문제가 해결 되지 않았습니다, 그리고 우리는 숨겨진 문자의 범위를 넘어가 게 하거나, 스크롤 막대를 컨테이너에 추가 해야

#wrap {단어-휴식: 휴식-모든 폭: 200px; 오버플로: 자동;}

< div id = "랩" > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 < / div >

숨겨진 효과: 컨테이너 정상, 콘텐츠

테이블에 대 한

1. (ie 브라우저) 테이블 레이아웃을 사용 하 여: 고정 테이블 너비, 불필요 한 콘텐츠 숨기기를 강제로;

< 표 스타일 = "표 레이아웃: 고정" 너비 = ">"
< tr >
< t d > abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
< 신안 >
< /tr >
</테이블 >

효과: 숨기기 원치 않는 콘텐츠

2. (ie 브라우저) 테이블 레이아웃을 사용 하 여: 고정; 테이블 너비, 내부 td, 일 사용 단어를 강제로-휴식: 휴식-모든; 또는 단어-랩: 휴식-단어, 줄 바꿈

< 테이블 너비 = "스타일 =" 표 레이아웃: 고정; >
< tr >
< TD width = "25%" 스타일 = "단어-휴식: 휴식-모든; "> abcdefghigklmnopqrstuvwxyz 1234567890
< 신안 >
< TD 스타일 = "단어-랩: 휴식-단어;" > ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
< 신안 >
< /tr >
</테이블 >

효과: 포장 수 있습니다.

3. (ie 브라우저), td를 th 중첩 div, p, 등 위에서 언급 한 Div, p 줄 바꿈을 메서드를 사용 하 여

4. (Firefox 브라우저)를 사용 하 여 테이블-레이아웃: 고정; 테이블 너비, 내부 td, 일 사용 단어를 강제로-휴식: 휴식-모든; 또는 단어-랩: 휴식-단어; 오버플로 사용 하 여: 숨겨진; 숨기기 넘어 콘텐츠, 여기 오버플로: 자동;

< 표 스타일 = "표 레이아웃: 고정" 너비 = ">"
< tr >
< TD width = "25%" 스타일 = "단어-휴식: 휴식-모든; 오버플로우: 숨겨진; "> abcdefghigklmnopqrstuvwxyz1234567890 < 신안 >
< TD width = "75%" 스타일 = "단어-랩: 휴식-단어; 오버플로우: 숨겨진; "> abcdefghigklmnopqrstuvwxyz1234567890 < 신안 >
< /tr >
</테이블 >

효과: 숨기기 보다 더 많은 콘텐츠

5. (Firefox 브라우저) td, 중첩 번째 div, p, 등 위의 사용 하 여 언급 한 파이어 폭스를 다루는 방법을
코드 상자를 실행
마지막으로,이 현상의 확률 매우 작습니다, 하지만 눈 속임의 사용자를 제외 하지 않을 수 있습니다.

여기 언급 한 예의 효과

<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "
< html xmlns =" "
< 머리 & gt
< 나 이 http-equiv = "content-type" 내용 = "text/html; charset = gb2312 "/ & gt
< 제목 > 문자 배치 < / 제목 & gt
< 유형 스타일 =" Text/css "
테이블, td, th, div 없음 국경: 1PX 녹색 고체;
코드 {글꼴-가족: "Courier New", 택배, 고정 폭;}
< / 스타일 & gt
< / 헤드 > < 몸 > < h1 ><

코드 > div < / 코드 >< / h1 >
< h1 >< 코드 > 모두 흰색-공간: 정상; < / 코드 >< / h1 >
< div 스타일 = 흰색-공간: 일반; 폭 : 200px; > wordwrap 여전히 발생 TD 요소에이 특성이 그것의 폭 래핑되지 않은 콘텐츠 O 보다 작은 값으로 설정 f 셀에 noWrap 설정 하는 경우에 true로. 따라서, 너비 특성 보다 우선이 시나리오에 NoWrap 속성 < / div >

< h1 >< 코드 > 즉 단어-랩: 휴식-단어 < / 코드 >< / h1 & gt
< div 스타일 단어 =-랩: 휴식-단어 ; 폭: 200px; " > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 < / div & gt
< h1 >< 코드 > 즉 단어 분리: 휴식-모든; < / 코드 >< / h1 & gt
< div 스타일 = "단어-휴식: 휴식-모든; 너비: 200px;" > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 < / div & gt

< h1 >< 코드 > 파이어 폭스/단어-휴식: 휴식-모든; 오버플로: 자동; < / 코드 >< / h1 & gt
< div 스타일 = 단어-휴식: 휴식-모든; 폭: 200px; 오버플로: 자동; " > abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 < / div & gt
< h1 >< 코드 > 테이블 < / 코드 >< / h1 & gt
< h1 >< 코드 > 표 레이아웃: 고정; < / 코드 >< / h1 >
< 스타일 표 = 표 레이아웃: 고정 "너비 ="
< tr & gt
< t d > Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss < / td & gt < /tr >

< / 테이블 >
< h 1 > < 코드 > 테이블-레이아웃: 고정; 단어-휴식: 휴식-모든; 단어-랩: 휴식-단어 < / 코드 >< / h1 >
< 테이블 너비 = 스타일 = "표 레이아웃: 고정";
< tr & gt
< td width = "25% 스타일 =" 단어-휴식: 휴식-모든; "> abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss < / td & gt
< td 스타일 =" 단어-랩: 휴식-단어; > abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss < / td & gt < /tr >

< / 테이블 > < BR> < H1 >< 코드 > FF 테이블-레이아웃: 고정; 오버플로우: 숨겨진; < / 코드 >< / h1 & gt
< 표 스타일 = "표 레이아웃: 고정" 폭 = "< tr >"

< td width = "25% 스타일 =" 단어-휴식: 휴식-모든; "> abcdefghigklmnopqrstuvwxyz1234567890 < / td & gt
< td width =" 75% "스타일 =" 단어-랩: 휴식-단어: 숨겨진; "> abcdefghigklmnopqrstuvwxyz1234567890 < / td & gt < /tr >

< / 테이블 >
< / 바디 >
< /html & gt