在SVG中将文本修剪为给定的像素宽度

Question

我在SVG中绘制文本标签.我有一个固定的宽度(比如200px).当文字太长时,我该如何修剪呢？

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

Answer 1

一种方法是使用textPath元素,因为从路径上掉落的所有字符都将被自动剪切掉.请参阅SVG测试套件中的文本路径示例.

另一种方法是使用CSS3 文本溢出 SVG的文本元素,一个例子在这里.Opera 11支持这一点,但您可能会发现其他浏览器此时仅支持html元素.

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

Answer 2

使用d3库

溢出文本的包装函数:

    function wrap() {
        var self = d3.select(this),
            textLength = self.node().getComputedTextLength(),
            text = self.text();
        while (textLength > (width - 2 * padding) && text.length > 0) {
            text = text.slice(0, -1);
            self.text(text + '...');
            textLength = self.node().getComputedTextLength();
        }
    } 

用法:

text.append('tspan').text(function(d) { return d.name; }).each(wrap);

Answer 3

实现Erik的第三个建议我提出了这样的事情:

//places textString in textObj, adds an ellipsis if text can't fit in width
function placeTextWithEllipsis(textObj,textString,width){
    textObj.textContent=textString;

    //ellipsis is needed
    if (textObj.getSubStringLength(0,textString.length)>=width){
        for (var x=textString.length-3;x>0;x-=3){
            if (textObj.getSubStringLength(0,x)<=width){
                textObj.textContent=textString.substring(0,x)+"...";
                return;
            }
        }
        textObj.textContent="..."; //can't place at all
    }
}

似乎做的伎俩:)

Answer 4

@user2846569 告诉我怎么做（是的，使用 d3.js）。但是，我必须做一些小改动才能工作：

         function wrap( d ) {
                var self = d3.select(this),
                    textLength = self.node().getComputedTextLength(),
                    text = self.text();
                while ( ( textLength > self.attr('width') )&& text.length > 0) {
                    text = text.slice(0, -1);
                    self.text(text + '...');
                    textLength = self.node().getComputedTextLength();
                }
            }
            svg.append('text')
                .append('tspan')
                .text(function(d) { return d; }) 
                .attr('width', 200 )
                .each( wrap );