《
div 实现长英文字母自动换行CSS》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335052013.htm
#wrap{word-break:break-all; width:200px; overflow:auto;}
Tag：主动换行 自动换行
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的不解决这个问题,咱们只有让超出边界的字符隐藏或者,给容器增加转动条
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
1.（IE浏览器）持续的英文字符跟阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
5.(Firefox浏览器) 在td,th中嵌套div,div css表单布局的五个小技巧,p等采用上面提到的凑合Firefox的方式
运行代码框
最后，这种景象呈现的多少率很小，然而不能消除网友的恶搞。
<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>
.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
这里 overflow:hidden;或者 auto；
=================================================================
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素占有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap",DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义;>正常文字的换行(亚洲文字和非亚洲文字)元素领有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
后果：容器畸形，内包庇藏
效果：能够实现换行
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
--> [
网站建设之]div 实现长英文字母自动换行CSS
<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>
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,DIV CSS样式在SEO中的命名规则,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
效果：隐蔽多于内容
4.(Firefox阅读器)应用 table-layout:fixed;强迫table的宽度,内层td,th采取word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;暗藏超越内容，这里overflow:auto;无奈起作用
效果：可以换行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<,DIV CSS布局中如何组织样式表以便于简化、维护;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><,DIV CSS列形导航示例;/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>
对table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
下面是提到的例子的效果
<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>,display inline-block的应用两例;</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>,Discuz!NT静态文件缓存(SQUID)解决方案;</h1>
<table width="200" style="table-layout:fixed;">
<tr>,Discuz!NT论坛数据库读写分离方案;
<,digg创始人经验分享 发展网站用户的9个方法;td width="25%" style="word-break : break-all; ">,dedecms织梦管理系统的网站搬家的步骤;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>
效果：隐藏过剩内容
自动换行问题,正常字符的换行是比拟公道的,而连续的数字和英文字符经常将容器撑大,挺让人头疼,下面先容的是CSS如何实现换行的方法最佳CSS定义换行代码
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行办法
(责任编辑：网站建设)
div 实现长英文字母自动换行CSS相关文章