网页开发过程中时常会遇到关于折行和不折行的问题。
比如连续英文或符号时，即使定义了宽度，文本还是没法折行，因为没有字符、字母里间隔的话，会当成一个单词。所以按不能折行来解析。
这时如果遇到了链接url，往往全是连续的英文和字母，这样就会把原本做好的页面搅乱。
而有的时候，我们希望强制不折行，或者某一链接不折行，或者折行时链接一起折行，而不会出现链接里两个字有断开的折行。
首先做个需要折行的效果，如果遇到连续的英文字母符号时，当窗口缩小时看下是否折行。
<br>
<hr>
什么也不加，不折行
<div style="200px；height:50px">
http://jiarry.126.com/http://jiarry.blogchina.com/http://hi.baidu.com/jarry/http://jarryli.googlepages.com/http://jiarry.blogspot.com/
</div>
<br>
<hr>
加上 word-break:break-all;word-wrap:break-word;在IE下缩小窗口时候折行，但firefox不折行.
<div style="200px；height:50px;word-break:break-all;word-wrap:break-word;">
http://jiarry.126.com/http://jiarry.blogchina.com/http://hi.baidu.com/jarry/http://jarryli.googlepages.com/http://jiarry.blogspot.com/
</div>
<br>
<hr>
加上 word-break:break-all;word-wrap:break-word;overflow:hidden;在IE下缩小窗口时候折行，但firefox不折行.
<div style="200px;height:50px;word-break:break-all;word-wrap:break-word;overflow:hidden;">
http://jiarry.126.com/http://jiarry.blogchina.com/http://hi.baidu.com/jarry/http://jarryli.googlepages.com/http://jiarry.blogspot.com/
</div>
<hr>
若firefox下也要把英文url强制折行，需要增加js
如下：
<pre>
<script language="javascript" type="text/javascript" defer="defer">
javascript:(function(){var D=document; F(D.body); function F(n){var u,r,c,x; if(n.nodeType==3){ u=n.data.search(/\S{10}/); if(u>=0) { r=n.splitText(u+10); n.parentNode.insertBefore(D.createElement("WBR"),r); } }else if(n.tagName!="STYLE" && n.tagName!="SCRIPT"){for (c=0;x=n.childNodes[c];++c){F(x);}} } })();
</script>
</pre>
如果不增加js可以参考如下：
在其它浏览器中要实现文字自动强制折行功能，代码如下。http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm
http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html
pre{
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
word-wrap和white-space都可以控制，但对IE5就不起作用了。
在IE5下面控制元素折行应该使用这个 word-break : normal | break-all | keep-all
<br>
<br>
强制不折行
对于table来讲，给td增加nowrap就行。xhtml写法是nowrap="nowrap";
用style="white-space:nowrap;"同样可以强制不折行。或者用<nobr>来包括不允许折行的内容。<hr>
<div style="200px；height:50px;white-space:nowrap;">
强制不折行强 制fasdf不折 行强制不折行强制fasf不 折行强制 不折行fasfsa强制不折行
</div>
<hr>
<br>
<div style="200px；height:50px;">
<nobr>
强制不 折行fasd强制 不折行强制不fasdf折行强制不折行 强制不折行fasdf强制不折行
</nobr>
</div>
<br><br><hr>
<br>
有样式控制
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
给table加样式 style="table-layout:fixed;300px;color:red;background-color:#cecece;word-break:break-all;word-wrap:break-word"
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 |
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 |
转载：http://blog.csdn.net/xworld99/archive/2005/11/23/535884.aspx
css之自动换行
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！
对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; 200px; }
或者
#wrap{word-break:break-all;200px;}
<div id="wrap">ddd1111111111111111111111111111111111</div>
效果：可以实现换行
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
#wrap{white-space:normal; 200px; overflow:auto;}
或者
#wrap{word-break:break-all;200px; overflow:auto; }
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed；
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）