0

­特に人気のあるすべてのブラウザで動作するため、素晴らしいです。単語の途中に置くと、その場所で単語が壊れている可能性があることをブラウザーに伝えます。そこで壊れると、ハイフンが表示されます。そうでない場合、キャラクターは非表示のままです。

しかし、コンテンツの作成者にとっては、これを使用するのは簡単ではありません。HTML に追加する必要があります。CMSに追加できたとしても、挿入してすぐにどこにあるのかわかりません。

そこで私は先に進み、作成者が使用できるように CMS でインライン スタイルを宣言しました。たとえば<span class="shy">communi</span>cation、単語の一部を選択すると、css ルールが疑似要素&shy;を使用して魔法のように を追加します。:afterそして、いくつかの CMS 固有の CSS を使用して、そのタグに点線の下線を付けて、それらのソフト ハイフンの 1 つがあることを示すことができます。Firefox および IE8+ で動作します。きちんとした。

しかし、Google Chrome ではハイフンが表示されません。それは言葉を壊しますが、ダッシュはありません。css プロパティをサポートしていないことはわかっていましたhyphensが、通常はサポートしています&shy;。

しかし、大丈夫なので、css スタイルを削除し、ロード時に追加する JavaScript をいくつか書きました。jQuery を使用して、 と の両方を試しまし.appendた.after。私も試してみinnerHTML += '&shy;'ました。それらのどれも機能しません！なんて残念…

これを回避するにはどうすればよいですか？

4

1 に答える 1

0

この質問を書いているときに解決策を見つけました。

&shy;その直後（およびその前）に別の文字がある場合にのみ、Chromeで機能するようです。上記の問題は、&shy;文字が常にタグ内の最後の文字であることです。そのため、スペースを追加してから、そのスペースをcssで閉じました。残念ながら、これは css 疑似要素では機能しないため、まだ JavaScript が必要でした。

スペースを追加すると Internet Explorer と Firefox で機能しなくなったため、ブラウザー検出を使用する必要がありました。(使用&nbsp;すると Firefox で動作しますが、IE では動作しません)

$(".shy").each(function(){
    this.innerHTML += '&shy; '; // add the soft hyphen (for all browsers)

    // Only Chrome has an issue
    if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        this.innerHTML += ' '; // add a space
        $(this).css('margin-right', '-.26em'); // close the gap from the space
    }
});

このように使用するには：

<span class="shy">communi</span>cation
于 2015-01-16T03:16:02.613 に答える