Question

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

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

我正在使用这个React组件link

谢谢

Answer 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);
  }

Answer 2

仅对于CSS，您可以使用换行器，尽管它没有最好的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;

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 typography component。您可以提供一个称为省略号的道具，该道具的行数应在其后被截断。

<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>

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

4 个答案:

React特定的CSS

JSX