10

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

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

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

  1. CSS

    "word-wrap: break-word".

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

    info@longemailaddress.co.u

    k

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

    ­

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

    info@long-

    emailaddress.co.uk

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

      (thinspace)
​ (zero-width space)

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

  4. 改行...

    <br />

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

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

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

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

4

3 に答える 3

6

テキストをクリップしてツールチップを使用できます

   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;

私がやっていることは、ホバーで全文をツールチップとして表示するか、titleツールチップの属性を使用することです。

<p class="email" title="long-email-address@mail.com">...</p>
于 2012-08-21T13:39:22.957 に答える
4

残念ながら、これは IE では機能しません<wbr>。<br>

于 2012-08-21T13:42:56.810 に答える
1

word-wrap:break-word単語を分割したいコンテナの幅に基づいています。決定した場所で分割することはありません。divの幅を狭くして希望の場所で壊さない限り、残念ながら運が悪いです。

あなたが発見したように、他の解決策はあなたのニーズには不十分です。さらに、「jQueryハイフネーションライブラリ」を使用しても、試したとおりに文字や改行などが挿入されるだけなので、おそらく問題は解決しません。あなたは同じ問題を抱えることになります。

これは不快なことではありませんが、デザインを回避するのではなく、デザインを再考する方がよいのではないでしょうか。ロビンの答えはまともな選択肢ですが、JavaScriptなしではメールアドレスを選択することはできません。

于 2012-08-21T13:43:22.627 に答える