CSS 제어 텍스트 자동 줄 바꿈-CSS 튜토리얼-php.cn

CSS 제어 텍스트 자동 줄 바꿈

高洛峰

풀어 주다： 2016-10-12 10:33:42

원래의

1414명이 탐색했습니다.

자동 줄 바꿈 문제 일반 문자의 줄 바꿈은 더 합리적이지만 연속된 숫자와 영어 문자는 컨테이너를 확장하는 경우가 많으므로 CSS에서

메서드

div 및 p와 같은 블록 수준 요소의 경우

일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백인 일반이 있으며 정의된 너비 다음에 자동으로 줄 바꿈됩니다.

html

일반 텍스트 줄 바꿈(아시아 및 비아시아 텍스트) 요소에는 기본 공백이 있습니다. 정의 시 일반

css

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

1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자의 경우 word-break:break-all; 줄 바꿈

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

또는

#wrap{word-wrap:break-word;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

효과: 줄 바꿈 가능

2.(Firefox 브라우저) 연속된 영어 문자와 아라비아 숫자의 줄 바꿈, 모든 Firefox 버전에서는 이 문제가 해결되지 않았습니다.

경계를 초과하는 문자만 숨기거나 컨테이너에 스크롤 막대를 추가합니다

#wrap

{word-break:break-all; Overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

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

테이블의 경우

1(IE 브라우저) table-layout:fixed를 사용합니다. ; 테이블의 너비를 강제로 조정하려면 중복된 콘텐츠를 숨김

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
tr>

효과: 중복된 콘텐츠 숨기기

2. (IE 브라우저) 테이블 레이아웃을 사용합니다. 테이블 너비를 강제로 조정하려면

내부 레이어 td에서 word-break: break-all; 또는 word-wrap: break-word line break를 사용합니다.

abcdefghigklmnopqrstuvwxyz 1234567890

효과: 줄 바꿈 가능

3.(IE 브라우저) td에 div, p 등을 중첩하고 줄을 사용합니다. 위에서 언급한 div와 p의 래핑 방법

4. (Firefox 브라우저) table-layout:fixed를 사용하여 테이블의 너비를 강제하고, 내부 td를 채택하고, word-break를 사용합니다. break-all; 또는 word-wrap: break-word;

overflow:hidden;을 사용하여 초과된 내용을 숨기세요. 여기서는 Overflow:auto가 작동하지 않습니다.

abcdefghigklmnopqrstuvwxyz1234567890

효과: 내용 이상 숨기기

5. (Firefox 브라우저) td, th 등의 Nest div, p 등을 Firefox를 처리하려면 위에서 언급한 방법을 사용하십시오

실행 더 코드박스 100 머티리얼 네트워크

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行
 
</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
 
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that 
has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, 
even if the noWrap property is set to true. Therefore, the WIDTH attribute takes 
precedence over the noWrap property in this scenario</div>
 
<h1><code>IE  word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE  word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF  table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

마지막으로 이런 현상이 발생할 확률은 매우 낮지만, 네티즌들의 장난도 배제할 수 없습니다.

궁금한 점이 있으시면 아래에 메시지를 남겨주세요

다음은 언급된 예시의 효과입니다