web-dev-qa-db-ja.com

コンテナからオーバーフローするURLと電子メールアドレスをハイフンでつなぎますか？

これは明らかに悪いUXとWeb開発です：

enter image description here

電子メールアドレス およびURL がコンテナーをオーバーフローしないようにするだけでなく、それらが完全に表示されることを確認することが重要です。


しかし、メールアドレスはこのようにハイフンでつなぐべきですか？

enter image description here

そしてそれを書き留めている人々に潜在的な混乱を引き起こしますか？ （不思議なことに、「contactname」はハイフン付きでしたが、「com」はハイフン付きではありませんでした。）私が知ることができることから、コピーと貼り付けはハイフンを無視します。

たとえば、上記では論理的に見えるのでハイフンが含まれます。しかし、以下では、ハイフネーションはより明確です

enter image description here


またはハイフネーションを削除する必要がありますか？

enter image description here

そして、このように、形成される厄介な改行と空白は耐えられるべきですか？

enter image description here

その場合も、厄介な空白がハイフネーションありでも発生する可能性があります。

enter image description here


ブラウザウィンドウのサイズを変更して、自由に ここでデモ/コードをいじってください してください。

emaillanguageoverflowsemantics
11
Baumr

私はエリックスに同意します、ハイフンを追加しないでください。

もう1つのオプションは、Ellipsisのcss text-overflow属性を追加することです。これにより、リンクが「切り取られます」。

a {
  max-width:50px;
  display:inline-block;
  overflow: hidden;
  text-overflow: Ellipsis;
}

enter image description here

残念ながら、これによりリンクのテキスト全体が表示されなくなります。それはdoesにより、ユーザーはリンクの完全なテキストをcopyできますが、 。

これはEricsに基づくjsfiddleの例です

9
Sam Pierce Lolla

非常に興味深い質問ですが、理論的な考慮がここで明らかなことを邪魔しているのではないかと思います。

A）メールが長すぎることがわかっている、またはb）動的に挿入された、場合によっては長すぎるメールを考慮する必要があるscanariosの場合は、問題を回避できます。あなたの質問に記載されている問題は、小さな列のdisplaying電子メールアドレスに対して有効な問題であることに同意します。

あなたが持っているようなリンクの場合、リンクをemailのテキストで表示することは完全に許容されます、またはリンクを押すとオペレーティングが開くことを示す特定のコンテキストに許容されるものシステムの電子メールダイアログ。 実際のアドレスはツールチップとして提供できます（アンカータグのtitle属性による最も簡単な解決策）。 ホバリングはmailto:[email protected] =ステータスバーのメール、そしてそれを実装する場合は、ツールチップにも。

質問のすべての提案は、あるレベルまたは別のレベルであいまいさをもたらすため、受け入れられないようです。 「機能する」唯一のものは、私の意見では、最初の画像です。

enter image description here

それによって、これが実装する唯一の実際のオプションであるという意味ではありませんが、それが唯一の実際の明確なオプションです。メールがボックスを超えて大きくなる方法は、レイアウトがボックスに配置される可能性のあるコンテンツを完全に認識しておらず、調整が必要であることを単に示しています。レイアウトを調整できない場合は、リンクテキストを任意にすることができます。

3
kontur

行うnotあいまいであるため、ハイフンを使用します。彼らは「アドレスのダッシュ部分かどうか」という質問を紹介します。

あなたは、コピーと貼り付けが問題ではなく、口述または自分で書くことが問題であると述べています。そのような何かが壊れている場合、テキストを選択するのは時々厄介であり、余分な（またはすべてではない）文字を選択させるため、ユーザーはコピーするのではなく自分で書きたいと思うかもしれません。

提案されているように、テキストをトリミングすることもより良いオプションです。ここで最後に必要なのは、あいまいさです。

2
user137369

notを使用することをお勧めします。ハイフネーションを追加します。これは、ユーザーがハイフネーションをコピーアンドペーストするか、書き留めて、間違ったURLを持つため、ひどいUXになるためです。

1
Mark Gavagan

何度もラップされたURLの一部をコピー/貼り付けしてみて、壊れていると言うのを何度も目にしたことがありますが、一部のユーザーが失敗することにならない方法はないと思います。醜い一方で、オーバーフローはそれほど悪ではないと思います。

壊さなければならない場合; @でこれを行うことは、おそらく最もリスクが低くなります。続いて。 TLDの前。

0
Dan Is Fiddling By Firelight

ホバー状態を使用して、省略した失われた情報を省略記号に提供します。ここに1つのソリューションを示します。もちろん、モックアップには改良が必要です:) 

0
jbx

リンクまたはURLのサイズがになるまで変更しても問題ありませんか？

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

もちろん、これはURLまたはアドレスが読めなくなるまでしか機能しませんが、オーバーフローが極端に長くならない場合は、実行可能な解決策になる可能性があります。

0
André

余分なハイフンを入れないでください。誤解を招く恐れがあります。メールアドレスにハイフンがあれば、ハイフンのついたメールアドレスに書き込みます。

最善の方法は、その内容に応じて長方形を拡大することです。 Webは、コンテンツがそれを優雅に行う媒体です。

0
Nicolas Barbulesco