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?
2
A
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>
Questions connexes
- 1. SVG tspan décalage horizontal
- 2. hyperlien en tspan (SVG) non affiché
- 3. Ellipsis problème avec firefox seulement
- 4. Modifier le texte de svg avec jquery
- 5. jqgrid ellipsis
- 6. utilisation avec fenêtre svg, UIWebView iphone
- 7. Utilisation de SVG dans j2Me
- 8. Utilisation de SVG dans doxygen
- 9. chevauchement de texte en forme jointjs avec plusieurs balises tspan
- 10. Ellipsis (texte abrégé) avec JSP/EL
- 11. Racket Macro Ellipsis Syntaxe
- 12. html/CSS Ellipsis
- 13. Texte SVG non centré firefox
- 14. Ellipsis et va_args as besoin
- 15. Plusieurs lignes de texte incurvé dans SVG
- 16. Utilisation de l'échelle SVG d3 sans traduction
- 17. Flexbox, espace blanc et ellipsis
- 18. SVG Coordonnées absolues?
- 19. Ellipsis en sortie à distance de rsyslog
- 20. tailles relatives du texte SVG et rect
- 21. Est-il possible de définir un svg <text>/<tspan> à une largeur fixe?
- 22. Obtention d'éléments de texte de l'événement svg by dblclick
- 23. Utilisation des fichiers SVG dans un ListView
- 24. remplacer attribut élément XML/svg pour l'élément spécifique ne
- 25. Utilisation du fichier svg sous img Balise
- 26. Ellipsis avec C# (finissant sur un mot entier)
- 27. Raphael texte de glisser sur l'écran et tspan dy
- 28. Question Android sur TableLayout et ellipsis
- 29. Texte après débordement Ellipsis mot-wrap
- 30. fonction JQuery pour le texte multiligne ellipsis
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). –
Oui, j'ai vu ça. malheureusement, je dois répondre aux personnes qui utilisent des navigateurs très anciens, la plupart IE –
svg2 n'a pas été adopté dans les principaux navigateurs https://css-tricks.com/svg-2-conundrum/ –