怎么让svg中text标签文字溢出显示省略号

发布网友

我来回答

2个回答

热心网友

通常的做法是这样的:

overflow:hidden;

2.text-overflow:ellipsis;

3.-o-text-overflow:ellipsis;

4.white-space:nowrap;

5.width:100%;

代码如下:

.li { overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;width:100%;}  


white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到<br>标签为止;

overflow:hidden;不显示超过对象尺寸的内容,就是把超出的部分隐藏了;

text-overflow:ellipsis;当文本对象溢出是显示,当然也可是设置属性为clip不显示点点点;

-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6;

该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。


这个Jquery插件:jQuery ellipsis plugin

调用方法:

$(document).ready(function() {

2. $('.ellipsis').ellipsis();

3.}

热心网友

svg中text标签没法设置width,可以判断一下字符串长度然后手动给他split了再把省略号拼上去

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com