condensant une longue chaîne ininterrompue
J'ai des URL et des e-mails qui sont affichés dans une colonne avec des bordures, ce qui est parfois trop étroit pour les données. En conséquence, il "déborde" de la frontière à droite. Il est trop tard pour changer le design. Une capture d'écran est jointe en bas.
La question est: quelle est la meilleure façon de la "condenser"? J'ai pensé à une seule option, vraiment: remplacer presque tout avant ou après le @ signe (et conservez une version complète dans l'attribut 'title'):
En supposant que rompre la ligne avec CSS n'est pas une option, quelle serait une bonne solution?
S'il n'est pas super important d'afficher l'adresse e-mail réelle, vous pouvez la changer en action:
<a href="mailto:[email protected]">Send me an email</a>
Si le but de montrer l'adresse e-mail est là pour que je puisse envoyer un e-mail à cette personne, alors vous n'avez pas vraiment besoin de le montrer. Montrez-moi simplement un appel à l'action avec lequel je peux vous envoyer un e-mail; mon client de messagerie se chargera du reste.
L'avantage de "Envoyez-moi un e-mail" ou quelque chose de similaire est qu'il ne changera pas en fonction de la longueur de l'adresse.
Si le but d'afficher l'adresse e-mail n'est pas d'agir sur elle ... alors pourquoi est-elle affichée?
Il suffit de jeter des idées supplémentaires ici: vous pouvez mettre l'adresse dans un div, définir la largeur de la div de manière appropriée et définir le débordement sur caché.
Ensuite, au survol de la souris, placez le div en haut de la pile z et définissez le débordement à afficher. Vous voudriez probablement un peu de rembourrage et un fond blanc sur le div afin qu'il apparaisse et donne à l'utilisateur un peu d'espace pour passer la souris là-dedans au cas où ils voudraient sélectionner le texte et le copier.
Je ne sais pas à quel point c'est "découvrable" pour l'utilisateur mais hein, c'est quelque chose que vous pouvez essayer!
Si vous devez l'afficher et devez couper la ligne, vous pouvez utiliser un dictionnaire pour tenter de décomposer en mots, puis diviser la ligne après un mot complet, par exemple.
averyveryveryvery [email protected]
Une alternative à tout afficher pourrait être
averyvery ... @ Host.com [icône du trombone ici]
Ensuite, affichez l'adresse complète dans l'info-bulle + l'info-bulle du trombone devrait dire cliquez ici pour copier l'adresse complète (et son action devrait être en conséquence).
Condenser l'e-mail n'est pas une bonne option. Les gens n'ont pas l'habitude de voir ça. Nous avons eu ce problème et jusqu'à présent, la meilleure façon de le résoudre était de placer le courrier après l'image afin d'en bénéficier plus en largeur.
Mais si vous ne pouvez pas le changer, vous pouvez couper votre e-mail et remplacer la fin par '...'. Cela peut être fait en CSS en utilisant la propriété text-overflow: Ellipsis.
Voici l'image que je ne peux pas poster ..: http://cl.ly/3i26462z3n200s1S1g2j