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

Posted 2023-02-22

【中文标题】带有省略号的 ReactJS 多行文本区域

【英文标题】：ReactJS multiline textarea with ellipsis

【发布时间】：2019-04-08 22:09:24

【问题描述】：

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

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

我正在使用这个 React 组件link

谢谢

【问题讨论】：

这对于 css 来说可能是不可能的，因为我很确定没有办法使用 css 确定一个区域中有多少行

【参考方案1】：

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

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

【讨论】：

它不起作用。您只需按“返回”即可打破限制。

【参考方案2】：

仅适用于 CSS，您可以使用 line-clamp，虽然它没有最好的 browser support

检查此codepen 以了解实施情况。

  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;

【讨论】：

谢谢！这是有希望的。虽然我必须对它的 API 中的某些事件使用反应组件。我得到了带有省略号的单行。我猜这是多行自动调用滚动条的预期行为，所以省略号不起作用

这应该与 react 或其他任何东西一起正常工作，因为它是一个 CSS 解决方案。

是的，它是直接的 css。它对于 反应组件来说效果不佳，因为它本质上是一个 标记。 -webkit-line-clamp 似乎不适用的地方。

这是迄今为止唯一有效的方法，但很多属性不应该在生产中使用。现在你知道其他方法吗？

【参考方案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>

【参考方案4】：

使用antd typography component 可以轻松实现多行省略号。您可以提供一个名为 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>