有个很常见的业务场景,就是实现单行截断或者使用多行截断,最后要以省略号结尾。比如某个商品的标题太长,在有限区域内不能完全展示,如果要全部展示,页面就会很丑,所以要单行或多行截断。这里记录一下常见的解决办法。

  1. 单行截断

    • 文本溢出我们用text-overflow能很容易解决,达到单行文本溢出省略的效果,这里如果不是block元素,比如span,要设置display: inline-block:
    1
    2
    3
    4
    5
    
     div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
  2. 多行截断

    • 实现多行截断有多种方法,比较常见的解决方式是:-webkit-line-clamp 实现
    1
    2
    3
    4
    5
    6
    7
    8
    
     div {
       width: 200px;
       text-overflow: ellipsis; // 超出时使用省略号
       display: -webkit-box; // 必须使用这个才生效,将对象作为弹性伸缩盒子模型显示
       overflow: hidden;// 必须使用,超出隐藏
       -webkit-line-clamp: 4; // 必须设置,多少行
       -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
     }

    这种方式只有 webkit 内核的浏览器才支持,因为-webkit-line-clamp一个不规范的属性,没有出现在 CSS 规范草案中,所以兼容性不太好。

    • 如果你知道内容一定会超出,可以用伪类after实现
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
     p{
        position: relative;
        height: 30px;
        overflow: hidden;
        line-height: 18px;  
     }
     p::after{
          content: '...';
          position: absolute;
          bottom:0;
          right: 0;
     }

    这种感觉不太实用,因为不是响应式的,当内容不会超出限制的时候,省略号还是存在。但也不是没有解决方法,可以用js判断是否内容有超出限制,但这样做就太麻烦了。