按行反应截断文本

React truncate text by line

我需要用 React 截断卡片标题(文本)。

我尝试使用 dotdotdot 组件 https://www.npmjs.com/package/react-dotdotdot 但它不适用于简单组件。

const content = ({title}) => <Dotdotdot clamp={2}><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est rem magni totam quos sapiente aliquid praesentium quae sint illo quas dicta cum illum dolorum quis eveniet, corrupti porro placeat, consequatur reprehenderit aliquam distinctio voluptates voluptate, temporibus omnis. Cum quis tenetur laborum minus accusantium provident eveniet, corrupti, reiciendis aliquam suscipit hic?</p></Dotdotdot>

在 ie11 和 mozilla 中不起作用。 在 -web-kit 中我有 -webkit-line-clamp 但在 mozilla 中它不起作用。

有人知道这个任务的决定吗?

我不知道您是希望该问题得到解决还是要求其他选项。

但我通常用react-lines-ellipsis来表示省略号。 如果您可以使用其他替代方案,那么您也可以在其他浏览器中查看 demo

您可以安装 react-text-truncate 并使用下面的代码来完成

<TextTruncate
  line={1}
  text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  }
/>

或者您可以访问 demo page

这适用于单行

function TruncatedLine({ text }: { text: string }) {
  return (
    <span style={{ position: "relative", display: "block" }}>
      <span style={{ color: "transparent" }}>X</span>
      <span
        style={{
          display: "block",
          position: "absolute",
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
          width: "100%",
          top: 0,
        }}
      >
        {text}
      </span>
    </span>
  );
}

组件会自动适应父级宽度

<div style={{width: "50%"}}><TruncatedLine text="very long multiline text"/></div>