单行、多行文字溢出效果...

一、单行文字溢出省略效果

正常300px宽度的段落

image.png

文字溢出隐藏效果

image.png

关键CSS

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

测试代码：

    
    
    
    
    



    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae rem consectetur earum repellendus qui, ab
        eligendi ipsam quos accusamus architecto! Pariatur doloribus consequatur doloremque, facilis inventore sequi
        dolore eius eum.

二、多行文字溢出省略效果

仅支持对-webkit-私有前缀支持良好的浏览器

文字溢出隐藏效果

image.png

关键CSS

{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

测试代码：

    
    
    
    
    



    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae rem consectetur earum repellendus qui, ab
        eligendi ipsam quos accusamus architecto! Pariatur doloribus consequatur doloremque, facilis inventore sequi
        dolore eius eum.