一尘不染

将省略号添加到SVG中的溢出文本?

css

我正在使用D3.js。我想找到一个与此CSS类等效的SVG,如果文本从其包含的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;
        });

当前文本溢出并且与rect元素重叠。

我有什么办法可以说:“如果文本大于特定宽度,则将其裁剪并添加省略号”?


阅读 704

收藏
2020-05-16

共1个答案

一尘不染

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

2020-05-16