<html>
<head><title>DIV中的滾動(dòng)條</title></head>
<body>
<div style="height:50px;width:100px;overFlow-y:scroll;overFlow-
x:hidden;word-break:break-all">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<div>
<body>
</html>
相關(guān)文章：
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的內(nèi)容自動(dòng)換行
它們的區(qū)別就在于：
1，word-break:break-all 例如div寬200px，它的內(nèi)容就會(huì)到200px自動(dòng)換行，如果該行末端有個(gè)英文單詞很長(zhǎng)（congratulation等），它會(huì)把單詞截?cái)?/font>，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子與上面一樣，但區(qū)別就是它會(huì)把congratulation整個(gè)單詞看成一個(gè)整體，如果該行末端寬度不夠顯示整個(gè)單詞，它會(huì)自動(dòng)把整個(gè)單詞放到下一行，而不會(huì)把單詞截?cái)嗟舻摹?/p>
3，word-break;break-all 支持版本：IE5以上 該行為與亞洲語(yǔ)言的 normal 相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本。 WORD-WRAP:break-word 支持版本：IE5.5以上 內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行( word-break )也將發(fā)生。表格自動(dòng)換行，避免撐開(kāi)。 word-break : normal | break-all | keep-all 參數(shù)： normal : 依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則，允許在字內(nèi)換行 break-all : 該行為與亞洲語(yǔ)言的normal相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本 keep-all : 與所有非亞洲語(yǔ)言的normal相同。對(duì)于中文，韓文，日文，不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本 語(yǔ)法： word-wrap : normal | break-word 參數(shù)： normal : 允許內(nèi)容頂開(kāi)指定的容器邊界 break-word : 內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行（word-break）也行發(fā)生說(shuō)明：設(shè)置或檢索當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)是否斷開(kāi)轉(zhuǎn)行。
對(duì)應(yīng)的腳本特性為wordWrap。請(qǐng)參閱我編寫的其他書目。 語(yǔ)法： table-layout : auto | fixed 參數(shù)： auto : 默認(rèn)的自動(dòng)算法。布局將基于各單元格的內(nèi)容。表格在每一單元格讀取計(jì)算之后才會(huì)顯示出來(lái)。速度很慢 fixed : 固定布局的算法。在這算法中，水平布局是僅僅基于表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內(nèi)容無(wú)關(guān)說(shuō)明：設(shè)置或檢索表格的布局算法。對(duì)應(yīng)的腳本特性為tableLayout。
建議：word-break 用3C檢測(cè)會(huì)顯示問(wèn)題的，導(dǎo)致百度快照也會(huì)出問(wèn)題-這個(gè)屬性O(shè)PERA FIREFOX 瀏覽器也不支持 word-break屬性可以用white-space:normal;來(lái)代替，這樣在FireFox和IE下就都能正確換行，而且要注意，單詞間的空格不能用來(lái)代替，不然不能正確換行。
=========================================================================
當(dāng)div所定義的區(qū)域的內(nèi)容達(dá)到一定程度時(shí)，在div標(biāo)簽里面嵌入css樣式表，定義overflow的屬性值，設(shè)置滾動(dòng)條相關(guān)的屬性。
<style tyle="text/css">
.testDiv{
border-style: solid ;
border-width: 50px ;
border-color: pink ;
position: absolute ;
top:200px ;
left:300px ;
height:200px ;
width:300px ;
overFlow-x: scroll ;
overFlow-y: hidden ;
scrollBar-face-color: green;
scrollBar-hightLight-color: red;
scrollBar-3dLight-color: orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
}
</style>
注：
1. overFlow:
visible 卻省值，沒(méi)有滾動(dòng)條，根據(jù)內(nèi)容自動(dòng)擴(kuò)撐區(qū)域的大小，即定義的區(qū)域無(wú)效
scroll 總是顯示滾動(dòng)條
hidden 沒(méi)有滾動(dòng)條，超出區(qū)域的內(nèi)容不可見(jiàn)
auto 根據(jù)內(nèi)容自動(dòng)判斷是否添加滾動(dòng)條
2.滾動(dòng)條顏色屬性：
face-color：滑塊顏色
hightlight-color：高亮顏色
3dlight-color：三維光線顏色
darkshadow-color：暗影顏色
shadow-color：陰影顏色
arrow-color：箭頭顏色
track-color：滑道顏色
base-color：滾動(dòng)條的主要顏色，其中包含滾動(dòng)按鈕和滾動(dòng)滑塊
