CSS 解決網頁連續英數字文字太長而導致版面撐大的問題

一直以來，當網頁遇到連續的英文數字時，總是會無法斷行造成版面被撐大，以前的做法都是在文章中插入 br 來強制換行，今天終於找到利用 css 就可以控制版本並強制換行了。

一開始找到的方式是在 css 加上

	word-wrap: break-word;
	word-break: break-all;

結果發現在 Internet Explorer 上是 ok 的，在 Firefox 上是無效的。

後來又找到另外一個方法，在 css 上加上：

	word-wrap:break-word;
	word-break:break-all;
	-moz-binding: url('./wordwrap.xml#wordwrap');
	overflow: hidden;

然後再利用 wordwrap.xml 來處理：
<?xml version = "1.0"?> <bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml"> <binding id = "wordwrap" applyauthorstyles = "false"> <implementation> <constructor> //<![CDATA[ var elem = this; elem.addEventListener('overflow', function() { var exp = /<​\/*[​_\s="'\w]+>/g; var txt = elem.innerHTML; var chars = txt.split(''); var newTxt = chars.join('​'); newTxt = newTxt.replace(exp, reconstructTag); elem.innerHTML = newTxt; },false); function reconstructTag(_tag) { return _tag.replace(/​/g, ''); } //]]> </constructor> </implementation> </binding> </bindings> <!-- Web2 -->
結果發現這個方式 firefox 最新版本已經不能用了。

最後找到的方法，在 css 上加上：

	word-wrap:break-word; 
	overflow: auto;
	width: 600px;

這樣 ie 與 firefox 都能使用了。
範例： <div style="width: 600px;overflow: auto; word-wrap: break-word;" >data:text/html;charset=utf-8;base64,Q29uZ3JhdHVsYXRpb25zISBZb3UndmUgZm91bmQgdGhlIGhpZGRlbiBtZXNzYWdlIQ0KDQpUbyBjbGFpbSB5b3VyIHByaXplLCB2aXNpdCBodHRwOi8vZ2V0ZmlyZWZveC5jb20gdG9kYXkhDQoNCkZyZWUgYnJvd3NlciBpbiBldmVyeSBib3ghDQo%3D</div> 結果

data:text/html;charset=utf-8;base64,Q29uZ3JhdHVsYXRpb25zISBZb3UndmUgZm91bmQgdGhlIGhpZGRlbiBtZXNzYWdlIQ0KDQpUbyBjbGFpbSB5b3VyIHByaXplLCB2aXNpdCBodHRwOi8vZ2V0ZmlyZWZveC5jb20gdG9kYXkhDQoNCkZyZWUgYnJvd3NlciBpbiBldmVyeSBib3ghDQo%3D

參考：
http://www.minwt.com/?p=93
http://www.cnblogs.com/analyzer/articles/1285732.html
http://blog.longwin.com.tw/2008/06/css_word_wrap_fix_too_many_word_2008/
http://hacks.mozilla.org/2009/06/word-wrap/