css多行超出显示省略号（兼容火狐）

css 单行，超出部分显示省略号

.oneoflist .rightbox p{
   overflow:hidden; 
   text-overflow:ellipsis;
   white-space:nowarp;
 }

补充：white-space，它主要是用来处理元素内文本的空白符、换行符以及是否允许折行。可选值包括normal（默认）、pre、nowrap、pre-wrap、pre-line。
word-wrap，是用来标明是否允许浏览器在单词内进行断句，为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。可选值break-word
word-break，用来标明怎样进行单词内的断句。默认值normal，可选值为break-all，keep-all。

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

.oneoflist .rightbox p{
   overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

因为不是webkit内核，在火狐上，-webkit-box-clamp:2不生效；

火狐浏览器多行显示省略号

这种效果的原理是将超出行数隐藏，并在结尾处通过伪元素自己写一个省略号达到同样的效果，这里@media screen and (min--moz-device-pixel-ratio:0) { ... }是针对火狐浏览器的样式，当前浏览器为火狐时，会使用其中包含起来的样式。而@-moz-document url-prefix(){ ... }在18年已失效。

.oneoflist .rightbox p {
    margin-top: -76px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media screen and (min--moz-device-pixel-ratio:0){
    .oneoflist .rightbox p{
        position: relative;
        line-height: 20px;
        max-height: 40px;
        overflow: hidden;
    }
    .oneoflist .rightbox p::after{
        content: "...";
        position: absolute;
        bottom: 0;
        right: 10px;
        padding-left: 40px;
    }
}