向 SVG 中的溢出文本添加省略号? [英] Add ellipses to overflowing text in SVG?

问题描述

我正在使用 D3.js.我想找到一个等效于这个 CSS 类的 SVG，如果文本从其包含的 div 流出，它会添加省略号:

I'm using D3.js. I'd like to find an SVG equivalent to this CSS class, which adds ellipses if text flows out of its containing div:

.ai-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>);
}

这是我的 SVG:

<g class="bar" transform="translate(0,39)">
    <text class="label" x="-3" y="6.5" dy=".35em" text-anchor="start">Construction</text>    
    <rect height="13" width="123"></rect>
</g>

生成如下:

barEnter.append("text").attr("class", "label")
        .attr("x", -3).attr("y", function() { return y.rangeBand() / 2})
        .attr("dy", ".35em").attr("text-anchor", "start")
        .text(function(d) {
            return d.Name;
        });

当前文本溢出并与矩形元素重叠.

Currently the text is overflowing and overlapping the rect element.

有什么办法可以说如果文本超过特定宽度，请裁剪它并添加省略号"?

Is there any way I can say "if text is more than a certain width, crop it and add ellipses"?

推荐答案

我不知道 SVG 有等效的 CSS 类，但是您可以使用 foreignObject 将 HTML 嵌入到 SVG 中.这使您可以使用此功能，并且通常更灵活(例如，您可以轻松地进行自动换行).

I am not aware of an equivalent CSS class for SVG, but you can use foreignObject to embed HTML in SVG. This gives you access to this functionality and is more flexible in general (e.g. you can do automatic line breaking easily).

请参阅此处了解完整示例.

这篇关于向 SVG 中的溢出文本添加省略号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！