FF 特有換行 類似於word-break:keep-all;
阿新 • • 發佈:2018-12-30
1.(IE瀏覽器)連續的英文字元和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以實現換行
2.(Firefox瀏覽器)連續的英文字元和阿拉伯數字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字元隱藏或者,給容器新增滾動條
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
firefox下的一個解決方法:
XBL binding
Css程式碼- .wordwrap { -moz-binding: url('./wordwrap.xml#wordwrap'); }
wordwrap.xml的內容:
Xml程式碼- <?xmlversion = "1.0"?>
- <bindingsxmlns = "http://www.mozilla.org/xbl"xmlns:html = "http://www.w3.org/1999/xhtml">
- <bindingid = "wordwrap"applyauthorstyles =
- <implementation>
- <constructor>
- //<![CDATA[
- var elem = this;
- doWrap();
- elem.addEventListener('overflow', doWrap, false);
- function doWrap()
- {
- var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
- while (walker.nextNode())
- {
- var node = walker.currentNode;
- node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
- }
- }
- //]]>
- </constructor>
- </implementation>
- </binding>
- </bindings>
- <!-- Web2 -->
如果要通用的,跨瀏覽器的解決方案就只能用javascript
Js程式碼- //aka makeDesignerHappy(dEl);
- function breakWord(dEl){
- if(!dEl || dEl.nodeType !== 1){
- returnfalse;
- } elseif(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){
- //Lazy Function Definition Pattern, Peter's Blog
- //From http://peter.michaux.ca/article/3556
- breakWord = function(dEl){
- //For Internet Explorer
- dEl.runtimeStyle.wordBreak = 'break-all';
- returntrue;
- }
- return breakWord(dEl);
- }elseif(document.createTreeWalker){
- //Faster Trim in Javascript, Flagrant Badassery
- //http://blog.stevenlevithan.com/archives/faster-trim-javascript
- var trim = function (str) {
- str = str.replace(/^/s/s*/, '');
- var ws = //s/,
- i = str.length;
- while (ws.test(str.charAt(--i)));
- return str.slice(0, i + 1);
- }
- //Lazy Function Definition Pattern, Peter's Blog
- //From http://peter.michaux.ca/article/3556
- breakWord = function(dEl){
- //For Opera, Safari, and Firefox
- var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
- var node,s,c = String.fromCharCode('8203');
- while (dWalker.nextNode())
- {
- node = dWalker.currentNode;
- //we need to trim String otherwise Firefox will display
- //incorect text-indent with space characters
- s = trim( node.nodeValue ) .split('').join(c);
- node.nodeValue = s;
- }
- returntrue;
- }
- return breakWord(dEl);
- }else{
- returnfalse;
- }
- }
以上程式碼來自下面這個網址: