テキストのレイアウトには、言語に応じていくつかのフォーマット要件があります。たとえば、単純化された中国人のコンマやセミコロンなどの句読点は、行の先頭には現れません。英語の場合、完全な単語は2行に表示されません。ブラウザは、このような原則に基づいてテキストを表示します。ただし、Webページには幅の制限があるため、連続的および長い文字、数字、または句読点マークは、例1に示すように、ページビジョンに影響するエリアの幅の幅の制限を超えています。この問題は、ユーザーの入力情報を表示するときに特に顕著です。ここでは、この問題を解決する方法について話しています。
CSS3ドラフトでは、この問題を解決するために、テキストの処理にワードラップとワードブレイクの2つの新しいプロパティが追加されます。
以下は、一般的なブラウザのサポート状況です。
| IE6/7 [1] | firefox2/3 [2] | Opera3+ | Safari9.5+/Chrome | |
|---|---|---|---|---|
| {word-wrap：break-word;} | TD要素の幅を設定する必要があります 例4と例5を参照してください | サポートされていません | サポートされていません | サポートされていないTD要素はありません 例4と例5を参照してください |
| {ワードブレイク：ブレークオール;} | 連続シンボルはサポートされていません 例3を参照してください | サポートされていません | サポートされていません | サポート |
<meta content="IE=7" http-equiv="X-UA-Compatible" />ヘッダーで宣言する良い方法です。{word-break：break-all;}は英語と数値の深刻な読みやすさを引き起こし、連続したシンボルを包むことができないため、{word-wrap：break-word;}は比較的良い選択です。
ただし、ブラウザからのこのような不十分なサポートに直面しても、JavaScriptを使用せずにこの問題を解決することはできません。つまり、ブラウザがCSSソリューションをサポートしていない場合は、連続文字列の適切な位置に「8203」文字を挿入します（もちろん、 <wbr />と「shy;。BROWSERのこれらの3つの文字のサポート」を使用することもできます。
function fnBreakWordAll(o){var o = o || {}、
iword = o.word || 13、
iRe = o.re || '[a-za-z0-9]'、
ball = o.all ||間違い、
sclassname = o.classname || 「ワードブレイクオール」、
aels = o.el || （関数（）{
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];
}
}
AELSを返します。
}）（）|| []、
fnbreakword = function（oel）{
// http://www.hedgerwow.com/360/dhtml/css-word-break.htmlに基づいて変更します
if（！oel || oel.nodetype！== 1）{
falseを返します。
} else if（oel.currentstyle && typeof oel.currentstyle.wordwrap === 'string'）{
breakword = function（oel）{
oel.runtimestyle.wordwrap = 'break-word';
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ノード、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;
}
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'））||ボール）{
fnbreakword（aels [i]）;
}
}
}
特定のアプリケーションについては、デモの例を参照してください
fnwordbreakall関数は、いくつかのカスタマイズされたパラメーターを提供し、使用方法とパラメーターは次のとおりです。
fnWordBreakAll({word:15,re:'[//w]',all:true});| パラメーター | 価値 | 説明します |
|---|---|---|
| 言葉 | 正の整数、デフォルトは13です | この単語数内の単語は /u8203に挿入されません。私の印象に13文字以上の文字がある言葉はあまりありません。これにより、ほとんどの単語が壊れないことを保証できます |
| 再 | 正規表現、デフォルト[A-ZA-Z0-9] | 単語がどの文字で構成されているかを決定するための単語の正規表現、 /の脱出に注意を払う |
| 全て | ブール値、デフォルトのfalse | デフォルトでオペラとFirefoxでデフォルトで実行されるかどうか、およびクラスアプリケーションがTHまたはTDのSafariで実行される場合、これは主に.word-break-allが定義されていない場合に使用され、IEにスタイルを追加します。 |
| className | 法的クラス名、デフォルトのワードブレイクオール | 実行関数の要素の対応する属性名 |
この関数のコア部分は、ヘッジャーワンから変更されました。 JavaScriptソリューション「クロスブラウザワードブレーカー」がコンパイルされました。 document.createTreeWalkerと分割メソッドを使用して、非IEブラウザの各文字に「＃8203」を追加します。純粋な中国のテキストで使用される場合は基本的に問題はありませんが、彼が与える例を観察すると、テキストに英語や数字がある場合、ラインブレークの問題を解決しますが、テキストを読みにくくし、文字間の間隔を増やすため、これに基づいて上記の改善を行います。