css文字溢出显示省略号

最新推荐文章于 2024-08-23 11:10:08 发布

Lccccb

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/Lccccb/article/details/88969488

版权

/*chrome*/
{
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

/*ie ff chrome  但是只能显示一行*/
{
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

兼容各浏览器，多行显示

<div class="mutil-line-ellipsis">
    <div>...</div>
</div>

.mutil-line-ellipsis {
	width: 200px;
    height: 40px;
    color: #333;
    background: white;
    position: relative;
    overflow: hidden;
    line-height: 20px;
}

.mutil-line-ellipsis:after {
	content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}