HTML / CSS « ??troncature réactif »

Question

J'ai récemment lancé une version réactive de mon site, mais je trouve que les divisions de largeur de pourcentage contenant un certain nombre de lignes simples de regard texte vraiment mauvais, comme tout montage sur une seule ligne à la fois les vues de bureau et mobiles résultats en chaque ligne de texte étant trop long ou trop court.

Mon balisage est une seule liste non ordonnée de liens (avec de longs textes d'ancrage) - Quelqu'un at-il des suggestions pour tronquer le texte d'ancrage selon la largeur de la division contenant

Answer 1

Je peux venir avec deux options:

L'une est de faire vous-même en utilisant javascript comme décrit ici:

Calculer la largeur du texte avec JavaScript

Je ne pense pas qu'il y ait aucune façon de déterminer la largeur du texte jusqu'à ce que le navigateur rend effectivement le texte.

Assurez-vous de ne pas afficher:. Aucun, ou le navigateur ne rend pas réellement et vous ne pouvez pas déterminer la largeur

La seconde est de laisser CSS faire pour vous; il est plus facile, mais vous perdez à peu près toute la flexibilité:

Si vous êtes prêt à laisser deviner CSS comment couper votre texte en points de suspension, vous pouvez essayer text-overflow: ellipsis

http://www.quirksmode.org/css/textoverflow.html