css多行文本超出显示省略号

vxy1142296352

341423

发布于
2021-07-05

移动端css多行文本显示省略号

但省略号后面需要显示一个图标,如上图

css css3

阅读 2.5k

3 个回答

得票最新

himushroom

1.5k1317

发布于
2021-07-06

手机屏幕大小不一样，不可能完全做到图中的样式，比如刚好不够放下一个字，但是又还有剩余宽度的时候，文字和下面的图标就没办法对齐了，所以~伪元素就好~

more-text {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding-right: 16px;
}
.more-text::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    content: "···";
    line-height: 12px;
    text-align: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: #555;
    border: 1px solid #555;
    cursor: pointer
}