超出一行、两行显示点点点...

方法一：纯css

适用范围：小程序，H5  

/* 超出一行显示... */
.over_one_line{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

 

/* 超出两行显示... */
.over_two_lines{
    display: -webkit-box;
    word-break: break-all;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

方法二：使用插件react-lines-ellipsis

适用范围：使用react的项目

1.下载插件

npm install --save react-lines-ellipsis

2.使用插件

import LinesEllipsis from 'react-lines-ellipsis'
 
<LinesEllipsis
  text='long long text'
  maxLine='3'
  ellipsis='...'
  trimRight
  basedOn='letters'
/>