網頁開發過程中時常會遇到關於折行和不折行的問題。
比如連續英文或符號時，即使定義了寬度，文本還是沒法折行，因為沒有字符、字母里間隔的話，會當成一個單詞。所以按不能折行來解析。
這時如果遇到了鏈接url，往往全是連續的英文和字母，這樣就會把原本做好的頁面攪亂。
而有的時候，我們希望強制不折行，或者某一鏈接不折行，或者折行時鏈接一起折行，而不會出現鏈接里兩個字有斷開的折行。
首先做個需要折行的效果，如果遇到連續的英文字母符號時，當窗口縮小時看下是否折行。
<br>
<hr>
什么也不加，不折行
<div style="width: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="width: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="width: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="width:200px；height:50px;white-space:nowrap;">
強制不折行強 制fasdf不折 行強制不折行強制fasf不 折行強制 不折行fasfsa強制不折行
</div>
<hr>
<br>
<div style="width:200px；height:50px;">
<nobr>
強制不 折行fasd強制 不折行強制不fasdf折行強制不折行 強制不折行fasdf強制不折行
</nobr>
</div>
<br><br><hr>
<br>
有樣式控制
fadsfdasfdasdgaggagadgagagagfadsfdasfdasdgaggagadgagagag 中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
給table加樣式 style="table-layout:fixed;width: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; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd1111111111111111111111111111111111</div>
效果：可以實現換行
2.（Firefox瀏覽器）white-space:normal; word-break:break-all;overflow:hidden;同樣的FF下也沒有很好的實現方法，只能隱藏或者加滾動條，當然不加滾動條效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width: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將多出的內容隱藏，以免影響整體效果）