css单行或多行文本溢出显示省略号

最新推荐文章于 2024-05-08 17:27:33 发布

zh_rey

最新推荐文章于 2024-05-08 17:27:33 发布

阅读量4.8k

点赞数 2

分类专栏： CSS JavaScript 文章标签： css ie 8 js 省略号

本文为博主原创文章，如需转载请在评论区留言说明。

本文链接：https://blog.csdn.net/zh_rey/article/details/69665049

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 3 订阅

订阅专栏

CSS

11 篇文章 1 订阅

订阅专栏

一、单行文本溢出省略

.title{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;/* for Opera */
}

经过本人测试，IE8以下浏览器需要在span标签里才会显示省略号。（有些浏览器需要加上指定的width）

二、多行文本溢出省略

1、适用于 WebKit浏览器及移动端；

.title-2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;/*显示的行数*/
	overflow: hidden;
}

2、兼容各版本浏览器

我这里以两行为例，该方法基本兼容市场上面所有主流浏览器。

<div class="title-2">
        <span>css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略</span>
</div>

.title-2{
	overflow: hidden;
	height: 40px;
	line-height: 20px;
	position: relative;	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;/*显示的行数*/
}
.title-2-text:after{
	content: "..."; position: absolute; bottom: 0; right: 15px; padding-left: 20px;
	background: -webkit-linear-gradient(left, transparent, #fff 55%);
	/*我在Safari上测试时发现透明到白色中间会有一个黑色的过渡后来我就写成-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1) 55%)*/
	background: -o-linear-gradient(left, transparent, #fff 55%);
	background: -moz-linear-gradient(left, transparent, #fff 55%);
	background: linear-gradient(to right, transparent, #fff 55%);
}

首先先对当前浏览器进行判断是否为webkit内核，如果不是再使用js对当前页面所有需要多行省略的dom进行遍历并添加class:title-2-text。（主要是利用文本的高度进行判断，当高度超出父元素的高度时添加class）

if(navigator.userAgent.indexOf('AppleWebKit')==-1){//判断当前浏览器不是webkit内核
	$(".title-2").each(function(){
    		if(parseFloat($(this).children("span").css("height"))>parseFloat($(this).css("height"))){
    			$(this).addClass("title-2-text");
    		}
    	});
}

效果图如下所示：