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

最新推荐文章于 2024-03-29 16:49:01 发布

原创

最新推荐文章于 2024-03-29 16:49:01 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #react.js #javascript #前端

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

兄弟们直接上图

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