React实现多行缩略,固定容器宽度，兼容火狐浏览器，包含展开和收起

1. 安装必要的依赖：

npm install react-lines-ellipsis

2. 在组件中引入react-lines-ellipsis：

import LinesEllipsis from 'react-lines-ellipsis';

3. 在组件中使用react-lines-ellipsis：

<LinesEllipsis
  text={text} // 要缩略的文本内容
  maxLine={3} // 最大行数
  ellipsis='...' // 省略号
  trimRight // 是否在结尾处截断
  basedOn='letters' // 基于字母还是基于单词截断
/>

4. 添加展开和收起功能：

import React, { useState } from 'react';

function App() {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };

  const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, tortor nec tempor accumsan, risus tellus vehicula erat, vel dictum justo ipsum vel justo.';

  return (
    <div style={{ width: '200px' }}>
      <LinesEllipsis
        text={text}
        maxLine={isExpanded ? 'none' : 3}
        ellipsis='...'
        trimRight
        basedOn='letters'
      />
      {isExpanded ? (
        <button onClick={toggleExpanded}>收起</button>
      ) : (
        <button onClick={toggleExpanded}>展开</button>
      )}
    </div>
  );
}

export default App;

5. 兼容火狐浏览器：

在火狐浏览器中，需要添加以下样式才能正常显示多行缩略：

.-webkit-box-orient: vertical;
display: -webkit-box;

完整代码：

import React, { useState } from 'react';
import LinesEllipsis from 'react-lines-ellipsis';

function App() {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };

  const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, tortor nec tempor accumsan, risus tellus vehicula erat, vel dictum justo ipsum vel justo.';

  return (
    <div style={{ width: '200px' }}>
      <LinesEllipsis
        text={text}
        maxLine={isExpanded ? 'none' : 3}
        ellipsis='...'
        trimRight
        basedOn='letters'
        style={{
          '-webkit-box-orient': 'vertical',
          display: '-webkit-box',
        }}
      />
      {isExpanded ? (
        <button onClick={toggleExpanded}>收起</button>
      ) : (
        <button onClick={toggleExpanded}>展开</button>
      )}
    </div>
  );
}

export default App;