React实现Abbr组件（基础版）

实现Abbr组件（基础版）

日常开发中我们可能有一些文本长度很长溢出的情况，我们可以通过设置他可以展示多少个字或展示几行来让其溢出之后展示省略号，且鼠标hover之后我们使用antd组件Tooltip进行提示，目前还是基础版本，后续要给其添加heightline 可以高亮关键字，大佬们如果存在问题可以联系我，一起讨论哈。

import { Tooltip } from "antd";
import React from "react";
import styles from "./index.less";

interface AbbrTextProps {
  /* 需要展示的文本 */
  text: string;
  /* 截取的长度 */
  length?: number;
  /* 设置行数 */
  line?: number;
  /* 设置样式 */
  className?: string;
}
const AbbrText: React.FC<AbbrTextProps> = ({
  text,
  length,
  line,
  className,
}) => {
  let displayText = text;
  let style = {};
  let showTooltip = false;

  if (length && text.length > length) {
    displayText = text.substring(0, length);
    displayText = `${displayText}...`;
    showTooltip = true;
  } else if (line) {
    style = {
      display: "-webkit-box",
      "-webkit-box-orient": "vertical",
      overflow: "hidden",
      textOverflow: "ellipsis",
    };
  }

  /* length 优先级大于line ,同时设置length 生效 */
  if (length && line) {
    console.warn("Abbr组件警告⚠️：length 和 line 同时设置时，length 优先级高");
  }

  // 当文本被截短或者设置了行数限制时显示提示
  const content = (
    <div
      className={`${styles.abbrText} ${className}`}
      style={{ ...style, WebkitLineClamp: line, lineClamp: line }}
    >
      {displayText}
    </div>
  );

  return <Tooltip title={(showTooltip || line) && text}>{content}</Tooltip>;
};

AbbrText.defaultProps = {
  length: undefined,
  line: 1,
  className: "",
};

export default AbbrText;

.abbrText {
    word-break: break-all;
    width: fit-content;
}

使用

// 超过一行就省略
<AbbrText text="我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字" line={1} />
// 超过十个字就省略
<AbbrText text="我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字我是很长的文字" length={10} />