Firefoxで改行されない英字の解決法

例えば、簡体字中国語では、行頭にカンマやセミコロンなどの句読点を表示しないし、英語では、1つの単語を2行で完結して表示することはない。しかし、ウェブページには幅の制限があるため、連続した余分な長さの文字や数字、句読点は、それらが配置されている領域の幅の制限を超え、ページの見た目に影響を与える、次のようなことが起こります。 例1 例1ではこのように表示されます。この問題は、ユーザー入力を表示する場合に特に顕著になりますので、その修正方法を紹介します。

での CSS3ドラフト のテキストの扱いについて、新たに2つの属性が追加されました。 ワードラップ と ワードブレーク という問題を解決するために

1. {word-wrap:break-word;}: アジアおよび非アジアのテキスト規則に従って、単語内の改行を許可し、任意の単語内で改行することを許可する。
2. {word-break:break-all;} : コンテンツは境界で分割され、必要に応じて単語分割が行われます。

一般的なブラウザでサポートされているのは以下の通りです。

<テーブル <フォント IE6/7 ^[1] Firefox2/3 ^[2] Opera3+ サファリ9.5+/クローム {word-wrap:break-word;}. td要素に幅を設定する必要があります。
参照 例4 と 例5 未対応 未対応 td 要素はサポートされていません
参照 例4 と 例5 {word-break:break-all;}. 連続した記号はサポートされていません
参照 例3 未対応 未対応 サポート

• MSDN の [1] にある CSSの互換性とInternet Explorer IE8ではIE6やIE7と同様にword-wrap属性とword-break属性に対応する予定ですが、IE8beta2でテストしたところ対応していなかったので、IE8はまだベータ版で、いずれ対応すると思うので、ヘッダーでの宣言は <meta content="IE=7" http-equiv="X-UA-Compatible" /> IE8がIE7に従ってページを解釈するようにすることは、良い方法です。
• [2] Firefox 3.1ではword-wrap属性がサポートされます。

word-break:break-all;} は英数字の可読性を著しく低下させ、連続した改行を許さないので、{word-wrap:break-word;} は比較的良い代替手段である。

しかし、このようなブラウザの対応の悪さを前にすると、JavaScriptに頼らざるを得ない。つまり、ブラウザがCSSによる解決策に対応していない場合、連続した文字列の適切な場所に&#8203;文字を挿入する（もちろん、その際も <wbr /> と&shy;の3つの文字をサポートしているブラウザは、以下を参照してください。 ppkによるwbrタグ ) の場合、これらの文字はブラウザに書き込まれても表示されず、長い文字列を改行するようになります。実装コードは以下の通りです。

function fnBreakWordAll(o){



var o = o || {},



  iWord = o.word || 13,



  iRe = o.re || '[a-zA-Z0-9]',



  bAll = o.all || false,



  sClassName = o.className || 'word-break-all',



  aEls = o.els || (function(){



    var aEls = [],



      aAllEls = document.getElementsByTagName('*'),



      re = new RegExp('(? :^|\\s+)' + sClassName + '(? :\\s+|$)');



    for(var i =0,iLen = aAllEls.length; i < iLen ; ++i){



      if(re.test(aAllEls[i].className)){



        aEls[aEls.length] = aAllEls[i];



      }



    }



    return aEls;



  })() || [],



  fnBreakWord = function(oEl){



// Based on http://www.hedgerwow.com/360/dhtml/css-word-break.html修改



    if(!oEl || oEl.nodeType ! == 1){



      return false;



    }else if(oEl.currentStyle && typeof oEl.currentStyle.wordWrap=='string'){



      breakWord = function(oEl){



        oEl.runtimeStyle.wordWrap = 'break-word';



        return true;



      }



      return breakWord(oEl);



    }else if(document.createTreeWalker){



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



      }



      breakWord = function(oEl){



        var dWalker = document.createTreeWalker(oEl,NodeFilter.SHOW_TEXT,null,false);



        var node,s,c = String.fromCharCode('8203'),



//re = /([a-zA-Z0-9]{0,13})/;



          re = new RegExp('('+ iRe + '{0,' + iWord + '})');



        while (dWalker.nextNode()){



          node = dWalker.currentNode;



          s = trim(node.nodeValue).split(re).join(c);



          node.nodeValue = s;



        }



        return true;



      }



      return breakWord(oEl);



    }



  };



for(var i=0,n=aEls.length; i<n; ++i){



  var sUa = navigator.userAgent,



    sTn = aEls[i].tagName.toLowerCase() ;



  if((/Opera/).test(sUa) || (/Firefox/).test(sUa) || ((/KHTML/).test(sUa) &&



  (sTn === 'td' || sTn === 'th')) || bAll){



    fnBreakWord(aEls[i]);



  }



}



}

具体的なアプリケーションについては デモ例

fnWordBreakAll関数にはいくつかのカスタム・パラメータがあり、その使い方と意味は次のとおりです。

fnWordBreakAll({word:15,re:'[\\w]',all:true});

<テーブル パラメータ 値 説明 単語 正の整数、デフォルトは13 この数値以内の単語は㊙に挿入されず、13文字以上の単語はあまりない印象で、大半の単語が壊れないことを保証しています レ 正規表現、デフォルトは[a-zA-Z0-9]。 単語がどの文字で構成されているかを判断するための正規表現です。 すべて ブール値、デフォルトはfalse すべてのブラウザで実行されるかどうかを決定します。OperaとFirefoxではデフォルト、Safariではthまたはtdでclassが適用されたとき、これは主に.word-break-allが定義されていないときに使われ、IE用のスタイルが適用されます。 クラス名 法的なクラス名。デフォルトではすべて改行されます。 機能を実行する要素の対応する属性名

この関数のコアは、Hedger Wang氏によってまとめられたJavaScriptのソリューションから変更されました。 クロスブラウザ・ワードブレーカー を使用しています。 document.createTreeWalker と分割メソッドを非IEブラウザに追加し、各文字の間に&#8203;、それはプレーンな中国語テキストで使用されている基本的に問題はありませんが、あなたが密接にテキストが英語や数字を持っているとき、彼は与える例を見れば、改行の問題の解決策が、読みにくいテキストを作って、文字間の間隔を増加するので、私はこの上に上記の改善を行ったので、私が構築。