water-design-ellipsis v1.0.4

综述

该组件适用于 web 环境下的文本溢出，支持：

• 单行溢出隐藏（设置 width & height 即可）
  • 支持溢出尾部省略隐藏
  • 支持溢出中间部分省略隐藏
• 多行溢出隐藏（设置 width & height & line 即可）
• 单行或多行溢出直接截断（设置 defaultDirectCut 为 true 即可）
• 支持溢出时 hover 有 tooltip 提示，移动端不支持 tooltip 提示，默认enableTooltip开启，请合理设置宽高和字体行高。

使用

import React from 'react';
import { createRoot } from 'react-dom/client';
import Ellipsis from 'water-design-ellipsis';
import './index.css';

function App() {
  return (
    <Ellipsis
      className="title"
      tooltipProps={{ textColor: 'pink', className: 'tool-tip' }}
    >
      看花不是花，看雾亦非雾，是宿命还是我糊涂；看岁月晃晃悠悠，不紧不慢拉着我走
    </Ellipsis>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

.title {
  width: 300px;
  height: 30px;
  font-size: 24px;
  line-height: 30px;
  background-color: skyblue;
}

.tool-tip {
  width: 260px;
}

API

注：单行溢出外层会嵌套一层盒子，可通过prevTextClassName,prevTextStyle修改内层盒子样式。