CSS单行/多行文本溢出显示省略号

CSS文本溢出显示省略号

问题背景：在一些网站的首页或者简略的文章介绍时，我们常常会让超出规划区域的文本隐藏，以增强用户体验
解决方案：

• 方案一单行文本自动省略号

    .overflow{
        word-break:break-all;   
        white-space:no-wrap;  /*不换行*/
        overflow:hidden;  /*溢出隐藏*/
        text-overflow:ellipsis;  /*文本溢出省略号*/
    }

注意点：该方案只能够实现单行文本溢出省略号

• 方案二 针对webkit内核的浏览器
  用他的私有属性-webkit-line-clamp，配合其他几个属性（display:-webkit-box、-webkit-oridient、text-overflow:ellipsis），就可以完美实现单行或多行的文本溢出显示省略号了
  代码：

       .overflow{
          display:-webkit-box;     /*设置对象为伸缩盒子模型*/
          -webkit-box-orient:vertical;  /*伸缩盒对象排列方式为垂直*/
          text-overflow:ellipsis;  /*文本溢出的时候省略号处理*/
          -webkit-line-clamp:2;  /*限制一个块元素显示的行数*/
          overflow:hidden;  /*将溢出的部分隐藏起来*/
       }

  注意点：该方案只是针对webkit内核的进行了实现，对于火狐等浏览器并没有效果

  • 方案三
    使用javascript计算文本字数，一旦超出就截断并加上省略号的方法

    var maxLength = 18;  //最长的字符串长度
    if($('.overflow').text().length > maxLength){
        $('.overflow').text($('.overflow').text().substring(0,maxLength) + '...'); //截取字符串并在结尾添加上...
    }

使用JavaScript实现文本溢出的方法还有很多种，大家可以在参考链接里面找到更好的
参考链接：
[1] WEB前端开发
[2] 多行文本溢出显示省略号的JS实现
[3] 鑫大大的博客

前端小白，请多多指教