我正在使用D3.js。我想找到一个与此CSS类等效的SVG,如果文本从其包含的div中流出,则会添加省略号:
D3.js
.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元素重叠。
我有什么办法可以说:“如果文本大于特定宽度,则将其裁剪并添加省略号”?
我不知道SVG的等效CSS类,但是您可以foreignObject用来将HTML嵌入SVG。这使您可以使用此功能,并且通常更灵活(例如,您可以轻松进行自动换行)。
foreignObject