对于div,p等块级元素css如何实现⾃动换⾏
正常⽂字的换⾏(亚洲⽂字和⾮亚洲⽂字)元素拥有默认的white-space:normal，当定义的宽度之后⾃动换⾏
html
复制代码
代码如下:
<div id="wrap">正常⽂字的换⾏(亚洲⽂字和⾮亚洲⽂字)元素拥有默认的white-space:normal，当定义</div>
css
复制代码
代码如下:
#wrap{white-space:normal; width:200px; }
1.（IE浏览器）连续的英⽂字符和阿拉伯数字，使⽤word-wrap : break-word ；或者word-break:break-all；实现强制断⾏
复制代码
代码如下:
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：可以实现换⾏
2.（Firefox浏览器）连续的英⽂字符和阿拉伯数字的断⾏,Firefox的所有版本的没有解决这个问题，我们只有让超出边界的字符隐藏或者，给容器添加滚动条
复制代码
代码如下:
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使⽤ table-layout:fixed；强制table的宽度，多余内容隐藏
复制代码
代码如下:
<table width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果：隐藏多余内容
2.(IE浏览器)使⽤ table-layout:fixed；强制table的宽度，内层td,th采⽤word-break : break-all；或者word-wrap : break-word ；换⾏
复制代码
代码如下:
<table width="200" >
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td >abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换⾏
3. (IE浏览器)在td,th中嵌套div,p等采⽤上⾯提到的div,p的换⾏⽅法
4.(Firefox浏览器)使⽤ table-layout:fixed；强制table的宽度，内层td,th采⽤word-break : break-all；或者word-wrap : break-word ；换⾏，使⽤overflow:hidden；隐藏超出内容，这⾥overflow:auto;⽆法起作⽤
复制代码
代码如下:
<table width="200">
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" >abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
效果：隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采⽤上⾯提到的对付Firefox的⽅法
运⾏代码框
最后，这种现象出现的⼏率很⼩，但是不能排除⽹友的恶搞。
下⾯是提到的例⼦的效果
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>
div border属性</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div >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 >abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE \ word-break:break-all;</code></h1>
<div >abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div >abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table 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" >
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td> <td >abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1>
<table width="200">
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz1234
567890</td> <td width="75%" >abcdefghigklmnopqrstuvwxyz1234567890</td> </tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。