css超出部分显示点点点...
来源:原创
时间:2016-11-10
作者:脚本小站
分类:CSS/HTML
超出部分显示...
首先要给元素设定一个宽度。然后加上如下样式
.li{overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
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() { $('.ellipsis').ellipsis(); }