带有省略号的 ReactJS 多行文本区域

Question

我正在尝试使用多行文本字段构建一个组件。 如果输入的文本超过 2 行，那么我想为文本溢出添加省略号 (...)。

如何通过仅操作 css 以仅在显示中显示省略号而不修改将存储为包含“...”的实际文本来实现这一点？

我正在使用这个 React 组件链接

谢谢

Answer 1

我刚刚想出了如何为 React 解决这个问题。

正如 Khodor 所说，线夹就是你想要的。 但是，官方 CSS 规范目前不支持它。 因此，您可以使用 -webkit-line-clamp 作为一种解决方法。 但是，我很难弄清楚 React 所需的确切语法。 我最终通过查看这个 NPM 包react-lines-ellipses的源代码并在他的 github repo 中搜索“webkit”来弄清楚它。

特定于 React 的 CSS

const textStyle = {
    maxWidth: '100%',
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 3,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };

我设置了maxWidth以确保文本填充显示元素的整个宽度。 这是可选的。

overflow: 'hidden'隐藏超过 3 行的额外文本（我随机选择了 3 个）。

textOverflow: 'ellipses'添加一个省略号 (...)，在那里被截断。

JSX

<div
    onClick={toggleTruncate}
    style={calculateTextStyle()}
>
This is where my long text goes.
</div>


// This function returns the correct style to the above div.
 function calculateTextStyle() {
    return truncate ? textStyle : null;
  }

// I used React Hooks to create a variable in state to manage if the text should be truncated or not.
  const [truncate, setToggleTruncate] = React.useState(true);

// This function toggles the state variable 'truncate', thereby expanding and truncating the text every time the user clicks the div.
  function toggleTruncate() {
    setToggleTruncate(!truncate);
  }

Answer 2

仅对于 CSS，您可以使用 line-clamp，尽管它没有最好的浏览器支持

检查此代码笔以进行实施。

  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

Answer 3

用于此的 javascript 可能如下所示。 您获取该值，将其拆分为多行，如果有多行，则将以下几行括在括号中。

您使用的 React 组件似乎接受了一个onChange道具，它可以使用类似的功能。

 const textAreaElement = document.getElementById('t') textAreaElement.addEventListener('keyup', () => { const value = textAreaElement.value.replace(/[\\(\\)]/g, '') const splitLines = value.split(/(?:\\r\\n|\\r|\\n)/) const newValue = splitLines.length > 1 ? `${splitLines[0]}\\n(${splitLines.slice(1, splitLines.length).join('\\n')})` : splitLines[0] textAreaElement.value = newValue; });

 <textarea id="t"></textarea>

Answer 4

多行省略号的一个简单实现是使用antd 排版组件。 您可以提供一个名为 ellipsis 的道具，其中包含应截断行数的值。

<Paragraph ellipsis={{ rows: 3, expandable: true }}>
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
  Ant Design, a design language for background applications, is refined by Ant UED Team.
</Paragraph>