逐行反应截断

Question

我需要用反应截断卡片标题（文字）。

我尝试使用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中，即它不起作用。

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

Answer 1

您可以安装react-text-truncate并使用以下代码执行此操作

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

或者您可以访问demo page

Answer 2

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

但我通常使用react-lines-ellipsis作为省略号。 如果您可以使用其他替代方案，那么您也可以在其他broswers中查看demo。