2013-10-07 4 views
2

J'ai une page où nous utilisons SVG pour rendre un diagramme de séquence. Certaines des données représentées ont le potentiel d'être parfois très longues, donc je voudrais limiter la largeur des éléments TSPAN et fournir une ellipse, tout en permettant à l'utilisateur de survoler le texte et d'afficher le texte intégral. Initialement, j'ai essayé d'utiliser CSS en conjonction avec la propriété text-overflow en définissant la valeur sur "ellipsis" qui est le comportement exact que je recherche, mais il n'a pas cette fonctionnalité disponible (big bummer) existe-t-il un autre moyen de limiter la longueur du texte et d'afficher le texte intégral sur une action telle que hover?Utilisation Ellipsis avec TSPAN de SVG?

+0

Qu'est-ce que vous demandez est dans la spécification SVG2: https://svgwg.org/svg2-draft/text.html#TextOverflowProcessing. Exemple: http://xn--dahlstrm-t4a.net/svg/css/text-overflow-ellipsis.svg (fonctionne dans Opera 12). –

+1

Oui, j'ai vu ça. malheureusement, je dois répondre aux personnes qui utilisent des navigateurs très anciens, la plupart IE –

+0

svg2 n'a pas été adopté dans les principaux navigateurs https://css-tricks.com/svg-2-conundrum/ –

Répondre

7

Créez le tspan avec le texte elliptique, puis un élément <title> avec le texte complet, par ex.

<tspan>Really really...<title>Really really long text</title></tspan>