CSS单行文本和多行文本

单行显示：

p{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

 text-overflow  设置文本溢出

        clip：默认值。将溢出的文本部分直接裁切。

         ellipsis： 将溢出的文本内容改为省略号（...）。

white-space   设置如何处理元素内的空白。

        nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

---

多行文本显示

 p{    
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;

            
      display: -webkit-box;
      -webkit-box-orient: vertical; 
      -webkit-line-clamp: 3;
}

word-break  自动换行的处理方式     

        break-all   允许在单词内换行。

        keep-all    只能在半角空格或连字符处换行。

display: -webkit-box;                  对象作为伸缩盒子模型显示       
-webkit-box-orient: vertical;        设置对象元素的排列方式
-webkit-line-clamp: 3;                 显示的行数

 

注：

-webkit-box-orient: vertical; 出现编译丢失问题，需要在上方加上注释

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;