CSS多行省略号详解

一、CSS多行省略号后面带查看更多

在一些移动端或是Web端的需要在省略文本后添加”查看更多“链接，方便用户进行相关操作，下面给出一个实例。

.ellipsis{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.more{
    color: #FF0000;
}

HTML结构：

<p class="ellipsis">
    这里是省略后的内容，后面需要添加“<i class='more'>查看更多</i>”
</p>

可以看到，使用了display: -webkit-box;实现省略，并设置了最大行数，然后使用overflow: hidden;进行省略，最后在文本后面添加一个”查看更多“的链接，这样就能实现省略和查看更多的联动。

二、CSS多行省略号显示

有一种情况是需要在文本的上面或者下面进行多行省略号的显示。

.ellipsis-top {
    position: relative;
    max-height: 144px;
    overflow: hidden;
}

.ellipsis-top::before {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5 30%);
}

.ellipsis-bottom {
    position: relative;
    max-height: 144px;
    overflow: hidden;
}

.ellipsis-bottom::after {
    content: "...";
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 40px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5 30%);
}

使用:before和:after来实现上面和下面的多行省略号，需要保证max-height和line-height一致，这样的话，当省略号加文本的高度大于max-height时，就会触发省略。

三、CSS多行省略号无效

有时候会出现在设置了多行省略号之后，无法实现省略的情况，这个时候可能是因为父容器没有指定高度或者行高不一致导致的。

.parent {
    height: 100px;
    line-height: 20px;
}
.child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

可以通过在父容器设置height和行高一致，同时在子容器上面设置-flex-box来实现多行省略号，并且需要设置overflow:hidden才能实现省略。

四、CSS文字溢出显示省略号

有时候我们需要在单行文字或者表格的单元格中实现文字溢出后省略号显示。

.single-line{
    white-space: nowrap;//不能换行
    overflow: hidden;//超出隐藏
    text-overflow: ellipsis;//超出显示省略号
}

上面的代码实现了单行文本溢出后省略号的显示，设置white-space: nowrap表示不能换行，overflow: hidden表示超出隐藏，text-overflow: ellipsis表示超出后显示省略号。

五、CSS省略号自动撑开宽度怎么办

当容器宽度随着内容自适应，但是又需要实现文字超出省略号的效果时，就可以使用下面的代码来实现。

.auto-width-ellipsis{
    max-width: 100px;//限制宽度最大值
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

这样设置之后，当容器宽度大于100px时，就会出现文字省略号的效果。