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

Question

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

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

Answer 1

应该是会固定显示几行吧，那就大概知道高度了，那你用定位就可以

Answer 2

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

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
}

Answer 3

我提了一个一样的问题，已解决的
https://segmentfault.com/q/1010000039803205