高级技巧之溢出的文字省略号显示

1.单行文字溢出显示省略号——必须满足三个条件

1.先强制一行内显示文本

white-space:nowrap;（默认normal自动换行） 

2.超出的部分隐藏

overflow:hidden;

3.文字用省略号代替超出的部分

text-overflow:ellipsis;

1.1.练习

  
    
    
    
    
    
  
  
    

      黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
    
  

2. 多行文字溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

/*多行文字超出的部分隐藏*/

overflow:hidden;

/*超出的部分省略号显示*/

text-overflow:sllipsis;

/*弹性伸缩盒子模型显示*/

display:-webkit-box;

/*限制在一个块元素显示的文本的行数*/

-webkit-line-clamp:2;

/*设置或检索伸缩盒对象的子元素的排列方式*/

-webkit-box-orient:vertical;

注意：更推荐后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。 

2.1练习

  
    
    
    
    
    
  
  
    

      黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程