KB-Auto Word Wrap Issue in Web Page Monkey Test

在系統測試中,有一種測試叫做Monkey Test(有人翻成搞怪測試,我比較想稱它為"惡搞測試" XD),意指測試者以不合乎常理的方式操作系統界面,檢測系統是否會發生不可預期的嚴重後果。用白話來說,就是百般刁難,亂按一通,系統也不能當機掛點資料受損,這樣才稱得上經打耐操的好程式。(聽前輩說,以前政府專案界有一位令廠商聞風喪膽,號稱"美猴王"的學者教授,只要受邀參與專案驗收,一定會在緊要關頭放大絕招---Monkey Test~~~)

今天負責上線前測試的同事回報,有隻猴子有位使用者通報某個表單網頁在輸入較長文字時,畫面會變形。

深入追查後,發現猴子測試者所輸入的是33333333333333333333333333333這類無意義連串英文,而這段文字被夾在<div style="width:140px">...</div>中顯示,雖然已設了寬度限制,但顯然瀏覽器無法以我們指定的寬度對這段無空白英文進行自動換行(auto wrap)處理。

於是,我設計了以下的測試,看一下這種特殊狀況在IE及Firefox下的呈現結果。

<table style="border:1px blue dotted">
<tr>
<td style="width:200px; border:1px green dashed; font-size:9pt;">
    <div style="width:140px; border: 1px red solid;">
    中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文
    </div>
    <div style="width:140px; border: 1px brown solid;">
    11111111111111111111111111111111111111111111111111111111111
    </div>
    <div style="width:140px; border: 1px brown solid;">
    Here are some normal words from normal human, but not crazy monkey... XD
    </div>
    <textarea style="width:140px; font-size:9pt;"
    >中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文
    </textarea>
    <textarea style="width:140px; font-size:9pt;"
    >1111111111111111111111111111111111111111111111111111111111
    </textarea>
    <textarea style="width:140px; font-size:9pt;"
    >Here are some normal words from normal human, but not crazy monkey... XD
    </textarea>
</td>
<td style="width:100px; border:1px purple dashed">Right Side</td>
</tr>
</table>

測試結果如下

結論是:

  1. 中文字或含空白的正常英文句子,IE或Firefox都可以正確斷行。
  2. 無空白的連續英數字,IE或Firefox無法自動斷行,因而導致<div>不依Style寬度顯示。
  3. 當TextArea中輸入無空白的連續英數字時,IE會強制斷行,Firefox則不會,但會跑出水平捲軸,並不會破壞寬度設定。

【補充】IE支援一個CSS設定"word-wrap:break-word",設定後便可以克服無空白長串英數字無法斷行的問題,但這一招受限於瀏覽器,並不算完整解決方案。

歡迎推文分享:
Published 23 May 2008 05:02 PM 由 Jeffrey
Filed under: , ,
Views: 21,690



意見

# Will 保哥 said on 23 May, 2008 09:58 AM

我有篇相關文章可分享:

如何顯示固定寬度的 Label, 超過會顯示 ...

blog.miniasp.com/.../How-to-display-fixed-width-of-a-Label-using-text-overflow.aspx

# rosbicn said on 23 May, 2008 11:41 AM

完美解决方案是有的。

.wordwrap{

width: 300px;

overflow:hidden;

word-wrap:break-word;

word-break:break-all;

white-space:normal;

-moz-binding: url(wordwrap.xml#wordwrap);

}

这里面用到了一个特别的wordwrap.xml。

具体请见blog.stchur.com/.../emulating-css-word-wrap-for-mozillafirefox

# Jeffrey said on 23 May, 2008 05:40 PM

to Will, rosbicn, 謝謝指點。

CSS有時還真令人痛恨,明明在不同的Browser上會有不同的問題,總是可以七拐八繞找出解決方法,每次想跟客戶豪爽地說辦不到,但就害怕別人早有克服之術,被客戶拿來吐糟。

-moz-binding看來又是Firefox另一個桃花源(或潘朶拉的盒子),可以擴充出超乎想像的效果,上回見識過一次http://tinyurl.com/4hrjvu

word-wrap被收納在CSS3裡了,不過據說到了Firefox 3.0,不支援還是不支援,不知在任性什麼... forum.moztw.org/viewtopic.php

最後,苦了我們這些搞網站的

# rosbicn said on 23 May, 2008 09:28 PM

我觉得在后续版本的Firefox应该会支持吧,word-wrap:break-word;已经被列入CSS3标准草案了,Firefox应该会支持CSS 3,如果CSS 3发布了的话。目前CSS 2.1是没有这个属性的,Firefox不支持,也不算什么错。参见:www.w3.org/.../WD-css3-text-20070306

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2008>
SunMonTueWedThuFriSat
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication