反应逐行截断文本答案

【问题标题】：React truncate text by line反应逐行截断文本
【发布时间】：2017-12-08 13:46:18
【问题描述】：

我需要用 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 中，即它不起作用。

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

【问题讨论】：

请包含演示您尝试过的代码。
我添加了一个简单的例子，我如何使用有问题的 dotdotdot。 github.com/CezaryDanielNowak/React-dotdotdot/issues/10 你可以看看这个问题。在 ie11 和 mozilla 中效果不佳。
对。现在请创建一个 codepen/jsfiddle/jsbin/whatever，这样我们就可以搞砸它了。

标签： javascript reactjs internet-explorer-11 mozilla

【解决方案1】：

你可以安装react-text-truncate并使用下面的代码来做

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

或者您可以访问demo page

【讨论】：

闪亮的演示链接不起作用，并且从 github 链接的演示已损坏。
这是 dema 页面的正确链接：shinychang.github.io/React-Text-Truncate

【解决方案2】：

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

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

【讨论】：

嘿，这个库是否也支持“折叠”功能？如果我希望用户能够折叠内容怎么办？
我认为没有
ie11有问题。它在ie11中不起作用

【解决方案3】：

这适用于单行

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>

【讨论】：