网页内连续英文或符号时强制折行与不折行的解决方案

关键词：强制折行不折行 nobr break-word break-all

网页开发过程中时常会遇到关于折行和不折行的问题。
比如连续英文或符号时，即使定义了宽度，文本还是没法折行，因为没有字符、字母里间隔的话，会当成一个单词。所以按不能折行来解析。
这时如果遇到了链接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>

有样式控制