鍍金池/ 問答/HTML/ css 控制文字顯示兩行,多余用省略號 手機(jī)端

css 控制文字顯示兩行,多余用省略號 手機(jī)端

如題，為了在不同的手機(jī)上，都顯示兩行文字，多的文字會被截斷，后面補(bǔ)上省略號，在網(wǎng)上找了很多css方法，都是
`text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;`
但這個在電腦上展示可以，在手機(jī)上的話，會把省略號和最后一個字合在一起，大家都什么好辦法嗎？

回答
編輯回答
小眼睛

這是我的想法，你試試能不能有所幫助：

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; /*這里自己調(diào)一調(diào)*/
}

推薦使用rem來控制，這樣便于控制整體樣式和字體大小，修改起來方便，頁面相應(yīng)上也美觀

2018年1月17日 22:52
編輯回答
空痕
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden;
    -webkit-box-pack: center;
2018年3月23日 13:06