CSS之用省略号代替文本溢出部分

用省略号代替文字溢出部分，分为两种情况，一种是单行时，另一种是多行时：

①单行时，直接上代码

HTML部分

<span class="nav">省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号</span>

CSS部分

.nav{
	display:block; /*转换为块级元素*/
	width:50px;  /*根据个人需要自定义宽度*/
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}

②多行时，也直接来代码

HTML部分

<span class="nav">省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号</span>

CSS部分

.nav{
    display: block;
    width:100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /*控制文本行数*/
    overflow: hidden;
}

但是该方法只适用于Webkit浏览器及移动端，所以下面我们来写一下适用于其他浏览器的：

HTML部分

<span class="nav">省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号</span>

CSS部分

.nav{
	display:block; /*转换为块级元素*/
	position: relative;
	line-height: 20px;
	width: 100px; 
	height: 40px;  /*根据自己需求设置宽度和高度*/
	overflow: hidden;
}
.nav::after{
    content: "..."; 
    position: absolute;
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

以上就是全部了，特别说明一下，因为我个人写文字喜欢用span这个标签，所以每次都转换成了块级元素，如果本身就用的是块级元素，就没有必要再转换了。

还有一点说明，本文最后一部分借鉴自

https://blog.csdn.net/diaoleiluomulaojin/article/details/77007901

这篇博客，但是也根据了我自己的理解并加以修改整理，希望对大家有用！！！！！！

CSS之用省略号代替文本溢出部分

猜你喜欢