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

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

我如何通过操纵css来实现这一点，只在display中显示省略号，而不修改将存储为包含“…”的实际文本

我正在使用这个反应组件

---

仅感谢CSS，您可以使用线夹，尽管它没有最好的

检查此项以实现

  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;

---

这方面的javascript可能如下所示。取该值，将其拆分为几行，如果有多行，则将以下几行用括号括起来

您使用的React组件似乎包含一个

onChange

prop，它可以使用类似的功能

const textraelement=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=新值；
});
将使用多行省略号的简单实现。您可以提供一个名为省略号的属性，该属性的值为行数，在该行数之后该属性将被截断

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


Ant Design是一种用于后台应用程序的设计语言，由Ant团队改进。
Ant Design是一种用于后台应用程序的设计语言，由Ant团队改进。
Ant Design是一种用于后台应用程序的设计语言，由Ant团队改进。
Ant Design是一种用于后台应用程序的设计语言，由Ant团队改进。
Ant Design是一种用于后台应用程序的设计语言，由Ant团队改进。
Ant Design是一种用于后台应用程序的设计语言，由Ant团队改进。
我刚刚想出了如何为React解决这个问题

正如霍多尔提到的，线夹是你想要的。但是，官方CSS规范目前不支持它。因此，您可以使用-webkit-line-clamp作为一种解决方法。然而，我很难弄清楚React所需的确切语法。我最终通过浏览这个NPM包的源代码并在他的github repo中搜索“webkit”找到了答案

特定于反应的CSS
我设置了
maxWidth
，以确保文本填充整个显示元素的宽度。这是可选的

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

textOverflow:“省略号”
在行尾添加一个省略号（…），省略号将被截断

JSX

这就是我的长文本的目的。
//此函数用于将正确的样式返回到上述div。
函数calculateTextStyle（）{
返回truncate？textStyle:空；
}
//我使用React钩子在state中创建一个变量来管理文本是否应该被截断。
const[truncate，setToggleTruncate]=React.useState（true）；
//此函数用于切换状态变量“truncate”，从而在用户每次单击div时扩展和截断文本。
函数toggleTruncate（）{
setToggleTruncate（！truncate）；
}
这在css中可能是不可能的，因为我相当确定，使用cssThanks无法确定一个区域中有多少行！这是有希望的。尽管我必须在它的API中为一些事件使用react组件。我得到了带省略号的单行。我猜这是多行自动调用滚动条的预期行为，因此省略号不起作用。这应该在react或其他任何情况下正常工作，因为它是一个CSS解决方案。是的，它是直接向上的CSS。它对react组件不起作用，因为它本质上是一个标记。webkit线夹似乎不适用。这是迄今为止唯一有效的方法，但许多特性不应用于生产。现在你知道还有其他的方法吗？但是它不起作用。您只需按“回车”键即可突破限制。
const textStyle = {
    maxWidth: '100%',
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 3,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };

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