在SVG中将文本修剪到给定的像素宽度 [英] Trimming text to a given pixel width in SVG

问题描述

我正在SVG中绘制文本标签.我有一个固定的宽度(例如200px).如果文字太长，该如何修剪?

I'm drawing text labels in SVG. I have a fixed width available (say 200px). When the text is too long, how can I trim it ?

理想的解决方案还可以在剪切文本的地方添加省略号(...).但是我也可以没有它.

The ideal solution would also add ellipsis (...) where the text is cut. But I can also live without it.

推荐答案

一种方法是使用示例 SVG测试套件.

One way to do this is to use a textPath element, since all characters that fall off the path will be clipped away automatically. See the text-path examples from the SVG testsuite.

另一种方法是在svg文本元素上使用CSS3 文本溢出 此处. Opera 11支持该功能，但是您可能会发现其他浏览器目前仅在html元素上支持它.

Another way is to use CSS3 text-overflow on svg text elements, an example here. Opera 11 supports that, but you'll likely find that the other browsers support it only on html elements at this time.

您还可以测量文本字符串并使用脚本自己插入省略号，我建议使用文本元素上的getSubStringLength 方法，增加nchars参数，直到找到合适的长度为止.

You can also measure the text strings and insert the ellipsis yourself with script, I'd suggest using the getSubStringLength method on the text element, increasing the nchars parameter until you find a length that is suitable.

这篇关于在SVG中将文本修剪到给定的像素宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！