一直以來,當網頁遇到連續的英文數字時,總是會無法斷行造成版面被撐大,以前的做法都是在文章中插入 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 來處理:
結果發現這個方式 firefox 最新版本已經不能用了。
最後找到的方法,在 css 上加上:
word-wrap:break-word;
overflow: auto;
width: 600px;
這樣 ie 與 firefox 都能使用了。
範例:
結果
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/