React多行文本溢出显示省略号...和箭头(纯CSS)

最新推荐文章于 2022-09-29 10:01:51 发布

唐老鸭.

最新推荐文章于 2022-09-29 10:01:51 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/printf_what/article/details/124629007

版权

这篇博客介绍了如何在React应用中使用纯CSS实现多行文本溢出时显示省略号，并在点击箭头后展开全部内容。详细展示了未超出、超出以及点击箭头后的效果，并提供了相关的ts和less代码示例。

摘要由CSDN通过智能技术生成

兄弟们直接上图

1. 文本未超出

2. 文本超出

3. 超出后点击箭头

4.ts代码

// 点击向下箭头
  const onDownClick = () => {
   
    document.getElementById("asidep")!.style.height = 'auto'
    document.getElementById("asidearea")!.style.overflow = "visible"
    document.getElementById("asidearea")!.style.textOverflow = "clip"
    document.getElementById("asidearea")!.style