React-Lines-Ellipsis：插件处理多行文本截断

实现自适应的多行文本截断并添加省略号。该项目依赖于CSS Flexbox布局，确保在各种屏幕尺寸和设备上都能正常工作，无需手动计算高度

安装

 法1：使用插件react-lines-ellipsis

（适用范围：使用react的项目）

npm install --save react-lines-ellipsis

 使用

import LinesEllipsis from 'react-lines-ellipsis'

function MyComponent() {

  const textTT = 'ABCDREHCJIENVELVDLKNFIUWEVJVCNJEBWYFEGUV JVIJNCINDC  BUBDUHEVFYWCHD'
  return (

    <div>
      <LinesEllipsis
        className="my-text"
        text={textTT } // 文本内容
        maxLine="3" // 最大显示3行
        ellipsis="..." // 超出3行省略号显示
        trimRight // 消除右侧空格
      />
    </div>
  );
}

export default MyComponent;

 法2：纯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;
}