对于div,p等块级元素css如何实现自动换行

2020-04-28 08:23:13易采站长站整理

下面是提到的例子的效果


<!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;”>abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</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>