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

方法一:纯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'
 

 

你可能感兴趣的:(微信小程序,css样式)