web-dev-qa-db-ja.com

途切れのない長い文字列の圧縮

ボーダー付きの列に出力されるURLと電子メールがいくつかあります。これは、データに対して狭すぎる場合があります。その結果、右側の境界線が「こぼれ」ます。デザインを変更するには遅すぎます。スクリーンショットは下部に添付されています。

質問は:それを「凝縮」する最良の方法は何ですか?私は本当に1つのオプションだけを考えました。ほとんどすべてを置き換えるbeforeまたはafter@記号( 'title'属性で完全版を維持):

[email protected]

[email protected]

CSSで改行することは選択肢ではないと仮定すると、良い解決策は何でしょうか?

example of very long uninterrupted string

4
montrealist

実際のメールアドレスを表示することがそれほど重要でない場合は、アクションに変更できます。

<a href="mailto:[email protected]">Send me an email</a>

メールアドレスを表示する目的があり、その人にメールを送信できるようにする場合は、実際に表示する必要はありません。メールを送信できる行動を促すフレーズを見せてください。残りは私のメールクライアントが処理します。

「Send me a email」などの利点は、アドレスの長さによって変化しないことです。

電子メールアドレスを表示する目的で操作する必要がない場合は、なぜ表示されるのですか?

5
Rahul

表示する必要があり、行を分割する必要がある場合は、辞書を使用して単語に分割し、完全なWordの後に行を分割することができます。

 averyveryveryvery 
 [email protected] 

それをすべて表示する代わりに、

averyvery ... @ Host.com [ペーパークリップのアイコンはこちら]

次に、ツールチップに完全なアドレスを表示+ペーパークリップのツールチップには、ここをクリックして完全なアドレスをコピーするように指示する必要があります(それに応じてアクションを実行する必要があります)。

2
Danny Varod

電子メールを圧縮するのは良い方法ではありません。人々はそれを見ることに慣れていません。私たちはこの問題を抱えていましたが、これまでのところ、解決策として最も良い方法は、メールの幅を広げるために画像の後に配置することでした。

ただし、変更できない場合は、メールを切り取り、末尾を「...」に置き換えることができます。プロパティtext-overflow:Ellipsisを使用してcssで実行できます。

これが私が投稿できない画像です..: http://cl.ly/3i26462z3n200s1S1g2j

1
ayottepl