Firefox (火狐) 坑
一, css 文本溢出省略号
单行 : overflow:hidden; text-overflow:ellipsis; white-space:nowrap
多行 : overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
因为text-overflow是一个比较特殊的属性, 我们倔强的Firefox(火狐)不支持这个属性
所以我们想起他的办法了
第一个 办法就是借助 定位和:after伪类 来实现, 啥也不多说: 直接上代码实例
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;/*字体。*/
font-size:12px;/*字体大小12像素。*/
}
div{
width:200px;/*层的宽度。*/
height:100px;/*层的高度。*/
line-height:24px;/*行间距。*/
position: relative;
border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/
background-color:#F9F9F9;/*背景颜色*/
margin:5px; /*距离周围都是5像素*/
}
div a{
color:#;
display:block;/*定义为块级*/
width:190px;/*要显示文字的宽度*/
float:left;/*左对齐*/
overflow:hidden; /*超出的部分隐藏起来。*/
line-height: 30px;
height: 60px;
font-size: 15px;
/*white-space:nowrap;*//*不显示的地方用省略号...代替*/
padding-right:7px; /*文字距离右侧7像素。*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
background: sandybrown;
}
div a:after{
content:"...";
position: absolute;
right: 3px;
top: 30px;
}/* 支持 Firefox */
</style>
</head> <body>
<div><a href="#">CSS截取字符串d用省略号，超出用省略号用省略号用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号用省略号用省略号代替</a></div>
</body>
</html>
当然还有第二种办法, 那就是借助强大的JavaScript
(function($) {
$.fn.ellipsis = function(enableUpdating){
var s = document.documentElement.style;
if (!('textOverflow' in s || 'OTextOverflow' in s)) {
return this.each(function(){
var el = $(this);
if(el.css("overflow") == "hidden"){
var originalText = el.html();
var w = el.width();
var t = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible',
'max-width': 'inherit'
});
el.after(t);
var text = originalText;
while(text.length > && t.width() > el.width()){
text = text.substr(, text.length - );
t.html(text + "...");
}
el.html(t.html());
t.remove();
if(enableUpdating == true){
var oldW = el.width();
setInterval(function(){
if(el.width() != oldW){
oldW = el.width();
el.html(originalText);
el.ellipsis();
}
}, );
}
}
});
} else return this;
};
})(jQuery);
备注: 推荐是用第二办法, 不推荐使用 :after伪类
二, Firefox不支持margin 等于 负数
解决办法 使用 position: relative;