Web ページのソフト ハイフンの問題をどのように解決しますか? テキストには、ハイフンで改行したい長い単語がある場合があります。ただし、単語全体が同じ行にある場合は、ハイフンを表示したくありません。
このページ のコメントによると<wbr>、非標準の「Netscape によって発明されたタグ スープ」です。­ 標準準拠にも問題があるようです。すべてのブラウザで機能するソリューションを入手する方法はないようです。
ソフトハイフンの処理方法はどれですか?なぜそれを選択したのですか? 推奨されるソリューションまたはベスト プラクティスはありますか?
残念ながら、­のサポートはブラウザー間で非常に一貫性がないため、実際には使用できません。
QuirksMode は正しいです。現在、HTML でソフト ハイフンを使用する良い方法はありません。それらなしで行くために何ができるかを見てください。
2013 編集: QuirksModeによると­、すべての主要なブラウザーで動作/サポートされるようになりました。
それらはすべてかなりうまく機能し、­Google はそれを含む単語のインデックスを作成できるため、優位に立っています。
­。最近のバージョンの IE (10 または 11) ではサポートされておらず、Edge では正しく動作しません。­<wbr>­と­Firefox、Windows (10) では、文字が保持され、ハード ハイフンはメモ帳に貼り付けられ、目に見えないソフト ハイフンはそれらをサポートするアプリケーションに貼り付けられます。IE (win7) は IE10 であっても常にハイフンで貼り付けられ、Safari (Mac) は一部のアプリケーション (MS Word など) ではハイフンとして貼り付けられ、他のアプリケーションでは貼り付けられない方法でコピーされます。­ IEを除くすべてのブラウザーで機能­します。IE は、コピーして貼り付けた完全な一致のみに一致します (IE11 まで)­は、通常入力された単語と を含む単語を照合します。2017 年現在、 を含む単語には一致しなくなったようです­。Yandex は同じように見えます。Bing と Baidu も一致しないようです。最新のライブ テスト用に、ソフト ハイフンを使用した一意の単語の例をいくつか示します。
­- confumbabbl­ication­ism- 儒教
<wbr>- donfounbabbl<wbr>ication<wbr>ism. このサイトは出力から削除<wbr/>されます。テスト用のjsbin.com スニペットを次に示します。
­- eonfulbabbl­ication­ism- 永遠のおしゃべり主義
ここでは、恥ずかしがり屋のハイフンはありません (これは、ページ上の検索テストにコピーして貼り付けるためです。検索エンジンのテストを壊さない方法で書かれています)。
ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ
成功: 指定された場所で改行してハイフンでつながれた場合、改行すべき場所を除いて、通常の単語として表示されます。
失敗：異常に表示される、または意図した場所で壊れない。
­成功、<wbr>成功、­成功­成功、<wbr>成功、­成功­成功、<wbr> まだテストされていません、­成功­成功、<wbr> 失敗(改行、ハイフンなし)、­成功­成功、<wbr> 失敗(ブレークなし)、­成功­成功、<wbr> 失敗(ブレークなし)、­成功word-wrap。時々、それらはすべて機能しているように見えます。理由についての明確なパターンはまだ見つかりません。­成功、<wbr>成功、­成功成功: ハイフンなしで単語全体をコピーして貼り付けます。(ブラウザ検索、MS Word 2011、および Sublime Text への Mac の貼り付けでテスト済み)
失敗: ハイフン、スペース、改行、またはジャンク文字を使用した貼り付け。
­成功、<wbr>成功、­成功­成功、<wbr>成功、­成功­ 失敗(すべてハイフンとして貼り付け)、他のアプリケーションで成功<wbr> 失敗、 MS Word に­ 失敗(すべてハイフンとして貼り付け)、他のアプリケーションで成功­ failはすべてハイフンとして貼り付け、<wbr> fail、­ failはすべてハイフンとして貼り付けます­ failはすべてハイフンとして貼り付け、<wbr> fail、­ failはすべてハイフンとして貼り付けます­ failはすべてハイフンとして貼り付け、<wbr> fail、­ failはすべてハイフンとして貼り付けます2017 年 11 月に更新<wbr>。StackOverflow の CMS によって削除されたため、テストされていません。
成功: ハイフンなしの単語全体を検索すると、このページが見つかります。
失敗: 検索エンジンは、単語の分割されたセグメントまたはハイフンを含む単語の検索でのみこのページを見つけます。
­失敗、­成功­失敗、­失敗­失敗、失敗 (長い文字列内のフラグメントに一致できますが、または­を含む単語自体には一致しません)­­­失敗、­成功 (Baidu のような文字列フラグメントに一致する可能性はありますが、100% 確実ではありません)検索エンジンマッチングとしての成否。
­成功、<wbr>成功、­成功­成功、<wbr>成功、­成功­成功、<wbr>成功、­成功­ のみ一致<wbr>を­ 失敗­ のみ一致<wbr>を­ 失敗­ のみ一致<wbr>を­ 失敗CSS3でハイフネーションを標準化するための継続的な取り組みがあります。
一部の最新のブラウザ、特にSafariとFirefoxは、すでにこれをサポートしています。これは、ブラウザのサポートに関する最新の優れたリファレンスです。
CSSハイフネーションが普遍的に実装されたら、それが最善の解決策になります。それまでの間、ハイフネーターをお勧めします。これは、特定のブラウザーに最も適した方法でテキストをハイフンでつなぐ方法を理解するJSスクリプトです。
ハイフネーター：
­他のほとんどのブラウザに自動的に挿入します。私はそれを使用しました、そしてそれは素晴らしい働きをします！
を使用し­、必要に応じて手動で挿入します。
私はいつも、人々がテクニックを使用しないことを残念に思っています。なぜなら、おそらく古くて変わったブラウザがあり、指定された方法でそれらを処理しないからです。最近の Internet Explorer と Firefox ブラウザーの両方で適切に動作することがわかりました­。これで十分なはずです。成熟したものを使用するか、変なブラウザーが表示された場合は自己責任で続行するよう人々に伝えるブラウザー チェックを含めることができます。
音節化はそれほど簡単ではなく、一部の Javascript に任せることはお勧めできません。これは言語固有のトピックであり、テキストをいらいらさせたくない場合は、デスクマンが慎重に改訂する必要がある場合があります. ドイツ語などの一部の言語は複合語を形成し、分解の問題を引き起こす可能性があります。たとえばSpargelder、( germ. saved money, pl.) は、音節規則によって、2 つの場所でラップされる場合があります ( Spar-gel-der)。ただし、2 番目の位置でラップすると、最初の部分がSpargel-(胚芽.アスパラガス) として表示され、読者の頭の中で完全に誤解を招く概念が活性化されるため、避ける必要があります。
文字列はWachstubeどうですか？Wach-stu-beそれは、「守衛室」( ) または「ワックスのチューブ」( )のいずれかを意味する可能性がありますWachs-tu-be。おそらく、他の言語でも他の例を見つけることができるでしょう。デスクマンが適切な音節のテキストを作成し、すべての重要な単語を校正できる環境を提供することを目指す必要があります。
ゼロ幅のスペースエンティティは<wbr>、事実上すべてのプラットフォームで確実にタグの代わりに使用できます。
​
また、破損を禁止するために使用できるジョイナー エンティティという単語も便利です。(区切りたい場所を除いて、単語の各文字の間に挿入します。)
⁠
この2つがあれば何でもできます。
これは、クライアント上で実行され、jQuery を使用する、少し前に検討していたクロスブラウザー ソリューションです。
(function($) {
$.fn.breakWords = function() {
this.each(function() {
if(this.nodeType !== 1) { return; }
if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
this.runtimeStyle.wordBreak = 'break-all';
}
else if(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
//For Opera, Safari, and Firefox
var dWalker = document.createTreeWalker(this, 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;
}
}
});
return this;
};
})(jQuery);
問題を解決するために、いくつかのデスクトップおよびモバイルブラウザーでソフトハイフンユニコード文字を正常に使用しました。
Unicode シンボルは\u00AD、Python の Unicode 文字列に簡単に挿入できますs = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'。
他の解決策は、Unicode char 自体を挿入することです。ソース文字列は、Sublime Text、Kate、Geany などのエディターで完全に普通に見えます (ただし、カーソルは目に見えない記号を感じます)。
社内ツールの Hex エディターは、このタスクを簡単に自動化できます。
¦簡単なコツは、コピーと貼り付けが簡単な のようなまれで目に見える文字を使用し、たとえば のフロントエンド スクリプトを使用してソフト ハイフンに置き換えること$(document).ready(...)です。のようなソース コードs = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')は、 よりも読みやすいですs = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'。
を使用することをお勧めしwbrます。コードは次のように記述できます。
<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>
文字間のスペースをリードしませんが、­改行によって作成されたスペースを停止しません。
エンティティ­ではなくUnicode 文字列を使用すると、Web ブラウザーがより寛容に見える場合があります。­
運が悪く、それでも JSF 1 を使用しなければならない場合、唯一の解決策は , を使用することです。動作しません。