測試圖片尺寸：1024*768　　螢幕分辨率設定：1024*768

測試文字：連續輸入１１０個英文半形字母，字型為TImes New Roman，使用12pt.字體大小

這一篇測試文章產生的scrollbar，是應用Roger在　大改版浩劫餘生錄　一文中所提供之　解決惡意留言所造成之版面變形　的CSS指令　overflow: auto;　。

可將以下指令視實際需要添加到　文章主體　這個CSS語法區段之中：

• 　overflow: auto;　本指令可適用於IE及Firefox，參考：overflow
• 　overflow-y:hidden;　本指令可適用於IE及Firefox，參考：overflow-y
• 　word-wrap:break-word;　本指令目前只適用於IE，參考：word-wrap
• 　word-break:break-all;　本指令目前只適用於IE，參考：word-break

/*文章主體*/

.blogbody{

width:100%;

overflow: auto;　/*解決超寬圖片或文字造成版面溢出*/
overflow-y:hidden;　/*隱藏垂直方向滾動條*/

word-wrap: break-word;　/*讓IE強制讓內容於邊界斷行*/

word-break:break-all;　/*讓IE對連續英文字母、長網址強制斷行(完整單字將無條件被拆開)*/

line-break:strict;　/*加強對日文換行的嚴謹性，隨個人需要加入*/

}

說明：

加入指令後，在IE瀏覽器中，文章主體將以超寬圖片總寬度為主，這也是因為連續輸入的英文字母已被　word-wrap:break-word;　或　word-break:break-all;　兩個指令強制斷行，所以如果使用IE瀏覽器觀看本文，並無需把滾動條往右拉，連續英文字母或長網址就已會先自動斷行，而碰到英文單字，則會無條件被拆開斷行。圖片超寬的情況不變，只是垂直方向的滾動條已設定為hidden隱藏，所以在文章最下方只產生平行方向的彩色滾動條。

選擇　word-break;break-all;　這個強制斷行指令，還可以定義英文字母的斷行方式，比如，當單字碰到邊界時是否無條件拆開、裁切後執行斷行。

如果你使用Firefox，就只有　overflow: auto;　與　overflow-y:hidden;　這兩個指令將發生效用，文章最下方產生平行方向的無色彩滾動條 (W3C標準未支援滾動條色彩)。

word-wrap:break-word;　和　word-wrap:break-all;　這兩個指令，目前在Firefox瀏覽器裡都還不會有作用(已排進CSS3.0草案，未來可能就會支援)。因此在Firefox裡，把滾動條拉到最右側，將看見下方不斷行的連續英文字母寬度已經超過了圖片。

測試文字：

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

測試用長網址：http://blog.xuite.net/_manager/article_edit.phtml?bid=123456789&pid=123546789&strAct=edit

測試圖片：