css实现单行、多行超出显示省略号兼容火狐

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

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多行文本超出显示省略号

p{
  overflow:hidden;//超出部分隐藏
  text-overflow:ellipsis;//超出部分显示省略号
  display:-webkit-box;//将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient:vertical;//规定框的子元素应该被水平或垂直排列
  -webkit-box-clamp:2//为不规范属性，表示展示几行
}

所以在火狐上，-webkit-box-clamp:2不生效

火狐上多行文本超出显示省略号

首先如果想让样式代码只在火狐上生效

@-moz-documentc url-prefix(){
  p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;//设置最大高度，加上overflowhidden，正好是两行，使超出部分隐藏
    overflow: hidden;
   }
   p::after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;//以上三个属性，可以后续调整，看要把...放在哪个位置
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);//背景色可写成渐变也可写成一样的颜色
  }
}

原理是自己写一个… 放在最后一行的末尾。