css 控制文字显示两行,多余用省略号 手机端

Question

如题，为了在不同的手机上，都显示两行文字，多的文字会被截断，后面补上省略号，在网上找了很多css方法，都是
`text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;`
但这个在电脑上展示可以，在手机上的话，会把省略号和最后一个字合在一起，大家都什么好办法吗？

Answer 1

这是我的想法，你试试能不能有所帮助：

p {
    width:100px;
    position:relative;
    line-height:20px; /*行高为高度的一半，这样就是两行*/
    height:40px;
    overflow:hidden;
}
p:after { /*使用伪元素*/
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    background:#FFF;  /*这个背景色要和p的背景色一致，也就是做个假^_^*/
    padding-left:6px; /*这里自己调一调*/
}

推荐使用rem来控制，这样便于控制整体样式和字体大小，修改起来方便，页面相应上也美观

Answer 2

display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden;
    -webkit-box-pack: center;