KB-Auto Word Wrap Issue in Web Page Monkey Test

<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>

# 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

你的看法呢?

標題 (必要的) 

姓名 (必要的) 

你的URL (選擇性的)

意見 (必要的) 

Remember Me?

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

CAPTCHA / 驗證碼 :

5 + 3 =

搜尋