問題タブ [soft-hyphen]

次のコードを使用して、実行時に電話番号を入力するためのコードを作成しますtextbox。電話番号の間にハイフン (-) を追加する方法。たとえば、1234567と入力すると、エントリは次のように表示されます。これ？JQueryでこれを行う方法は?

＆shy;を使用したいウェブサイトがあります。（ソフトハイフン）私が望むように単語を壊す。

Chromeのスクリーンショットはこちらをクリックしてください

問題のあるコンピューターはOSX（複数のバージョン）を実行しており、問題はChromeとSafari（複数のバージョン）の両方で発生します。OSとブラウザのバージョンがまったく同じコンピュータでは、これが異なって表示される可能性があります。スクリーンショットは、Chromev。21.0.1180.75を搭載したOS10.8で撮影されています。

ソフトハイフンは単語を分割し、ハイフン「-」を挿入するため、機能しているように見えますが、十字を使用してその長方形も生成します。

ウェブサイトは@fontfaceを使用しますが、それが何か関係がある場合は。

ありがとうございました！

メールアドレスを div 内でワードラップしようとしています。そうしないと、div の幅に対して長すぎるためにオーバーフローしてしまいます。

この問題が以前にここで取り上げられたことは知っていますが (例:この質問)、そこや他の場所で言及されているすべての可能な解決策を取り上げているため、読み進めてください。

以下のソリューションはどれも、私が望むことを正確に行いません:

1. CSS

   div の幅によっては、電子メール アドレスがぎこちない場所で壊れます。例えば

   info@longemailaddress.co.u

   k

2. HTML 内でソフト ハイフンを使用します。

   これは非常によくサポートされていますが、ページにハイフンが表示されるため、ユーザーは電子メール アドレスにハイフンが含まれていると信じてしまいます。

   info@long-

   emailaddress.co.uk

3. 電子メール アドレス内に薄いスペースまたは幅ゼロのスペースを使用します。

   これらはどちらも余分な文字を挿入します（ユーザーがコピーして貼り付けると残念です）

4. 改行...

   ...ほとんどの場合、div は 1 行に電子メール アドレスを含めるのに十分な大きさであるため、アウトです。

HTML/CSS でこれを行うための独創的な方法を期待していると思います。おそらく疑似要素 (:before / :after など) を使用するか、ソフト ハイフンを使用しますが、何らかの巧妙な方法で CSS でそれを隠します。

私のサイトでは jquery を使用しているので、必要に応じて jquery を使用しますが、この 1 つの小さな問題のためだけにハイフネーション ライブラリ全体を含めたくはありません。

はがきで答えてください。（または、理想的にはここ...）

私が使用しているフォントには、私の書き言葉で非常に一般的な文字としてソフトハイフンがあり、多くの理由でそれを使用する必要がありますが、私が読んださまざまな理由で html はそれらを非表示にし、文字を含む単語を難しくします。読んで理解するのが厄介です（「道路」の表示を「rad」または「rod」と考えてください）。とにかく、html、css、または何かを使用して、ソフトハイフンをウェブサイトに強制的に表示することはありますか?

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

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

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

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

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

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

単語ラッパーの幅に応じて、ソフト ハイフンが単語を分割するさまざまな方法があることを発見しました。

JSFiddleの例は、これを明確に示しています。

最初の 2 つの単語 (例) は私が期待しているように見えますが、最後の 2 つの単語は私には謎です。単語の最後にダッシュが付いて表示される理由を誰か教えてもらえますか?­

編集: Oriol が指摘しているように、ブラウザーや環境が異なれば、異なるビューが生成されます。ここに私が見るものの写真があります：