Question

我需要的是截断文本，使其填充svg矩形的大小，然后在mouse-over上弹出一个完整大小。我已经尝试使用以下代码隐藏文本然后弹出，但它似乎没有工作。

#text_trunc {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#text_trunc:hover{
    overflow: visible; 
    white-space: normal; 
    width: auto;
    position: absolute;
    background-color: rgba(0,0,0,0);
}

我使用svg创建了所有javascript元素，这就是我为文本元素创建id的地方

text.setAttributeNS(null, "id", "text_trunc");

我最好的猜测是svg创建了一个无法被css截断的图片......仍然需要一个解决方案。提前致谢

Answer 1

“溢出”CSS属性在SVG中不起作用，因为<text>元素没有“框”溢出。

您可以尝试尝试使用“clip-path”属性。它是一个特定于SVG的CSS属性。您需要在SVG中定义一个截断框大小的剪辑路径。然后使用CSS规则添加和删除它。

#text_trunc {
    clip-path: url(#truncbox);
}

#text_trunc:hover{
    clip-path: none;
}

不幸的是，这种解决方案不允许像自动省略号这样的更漂亮的行为。

Answer 2

我认为以下网址会对您有所帮助

http://css-tricks.com/forums/discussion/12984/css-display-hidden-text-on-rollover/p1

截断svg文本以适合rect

2 个答案: