css省略、Css实现单行、多行文本溢出显示省略号 …以及H5常见省略场景

#####场景一：对文案显示字数没有要求:直接css控制省略
单行文本的溢出显示省略号

//一行省略
.one-line{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap
}

//两行省略
.two-line{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //元素显示的文本的行数
    overflow: hidden;
}

#####场景二：对文案显示字数有要求
eg:1.要求显示前面4个字，其余内容省略

    let content = '好好学习，天天向上'
    content.substr(0, 4) +'...'
    或者
    content.substring(0, 4) +'...'

2.要求显示前面3个字和后面3个字中间内容省略

  let content = '好好学习，天天向上'
  content.substr(0, 3) +'...'+ content.substr(6, 3)
  或者
 content.substring(0, 3) +'...'+ content.substr(6, 3)