it-swarm.com.de

Verdichtung einer langen, ununterbrochenen Saite

Ich habe einige URLs und E-Mails, die in einer Spalte mit Rahmen ausgegeben werden, die manchmal zu eng für die Daten ist. Infolgedessen "verschüttet" es die Grenze rechts. Es ist zu spät, um das Design zu ändern. Ein Screenshot ist unten angehängt.

Die Frage ist: Was ist der beste Weg, um es zu "verdichten"? Ich habe wirklich nur an eine Option gedacht: fast alles zu ersetzen, entweder vor oder nach das @ signieren (und eine Vollversion im Attribut 'title' beibehalten):

[email protected]

[email protected]

Was wäre eine gute Lösung, wenn man davon ausgeht, dass es keine Option ist, mit CSS die Grenze zu überschreiten?

example of very long uninterrupted string

4
montrealist

Wenn es nicht besonders wichtig ist, dass Sie die tatsächliche E-Mail-Adresse anzeigen, können Sie sie in eine Aktion ändern:

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

Wenn der Zweck der Anzeige der E-Mail-Adresse darin besteht, dass ich dieser Person eine E-Mail senden kann, müssen Sie diese nicht wirklich anzeigen. Zeigen Sie mir einfach einen Aufruf zum Handeln, mit dem ich Ihnen eine E-Mail senden kann. Mein E-Mail-Client kümmert sich um den Rest.

Der Vorteil von "Senden Sie mir eine E-Mail" oder ähnlichem ist, dass es sich nicht ändert, je nachdem wie lang die Adresse ist.

Wenn der Zweck der Anzeige der E-Mail-Adresse nicht darin besteht, darauf zu reagieren ... warum wird sie dann angezeigt?

5
Rahul

Wirf hier einfach zusätzliche Ideen raus: Du kannst die Adresse in ein Div einfügen, die Breite des Div entsprechend einstellen und den Überlauf auf versteckt setzen.

Bringen Sie dann beim Mouseover das Div an die Spitze des Z-Stapels und stellen Sie den anzuzeigenden Überlauf ein. Sie möchten wahrscheinlich etwas Polsterung und einen weißen Hintergrund auf dem Div, damit es angezeigt wird und dem Benutzer ein wenig Spielraum für die Maus gibt, falls er den Text auswählen und kopieren möchte.

Ich bin mir nicht sicher, wie "auffindbar" das für den Benutzer ist, aber eh, es ist etwas, das Sie versuchen könnten!

2
tobybot

Wenn Sie es anzeigen müssen und die Zeile unterbrechen müssen, können Sie ein Wörterbuch verwenden, um zu versuchen, in Wörter aufzuteilen, und dann die Zeile nach einem vollständigen Wort, z.

 averyveryveryvery 
 [email protected] 

Eine Alternative zur Anzeige könnte sein

averyvery ... @ Host.com [Symbol der Büroklammer hier]

Zeigen Sie dann die vollständige Adresse in Tooltip + Tooltip der Büroklammer an. Klicken Sie hier, um die vollständige Adresse zu kopieren (und die Aktion sollte entsprechend sein).

2
Danny Varod

Die E-Mail zu verdichten ist keine gute Option. Die Leute sind es nicht gewohnt, das zu sehen. Wir hatten dieses Problem und bis jetzt war der beste Weg, es zu lösen, die Mail nach dem Bild zu platzieren, um mehr Breite zu erzielen.

Wenn Sie es jedoch nicht ändern können, können Sie Ihre E-Mail abschneiden und das Ende durch "..." ersetzen. Dies kann in CSS mithilfe der Eigenschaft Textüberlauf: Ellipse erfolgen.

Hier ist das Bild, das ich nicht posten kann ..: http://cl.ly/3i26462z3n200s1S1g2j

1
ayottepl