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

关注

原创最新推荐文章于 2026-08-31 16:12:21 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

Web UI测试实战：14个易忽略测试点与自查清单 UI测试是确保Web应用用户体验的关键环节，其核心在于验证界面与用户交互的完整生命周期。从技术原理看，它覆盖视觉呈现、交互逻辑、数据状态与前端性能四个维度，通过系统性的验证保障产品的可用性与稳定性。在工程实践中，UI测试的价值在于提前发现并修复影响用户体验的缺陷，降低线上问题发生率，尤其在表单交互、内容展示、动态组件等高频场景中作用显著。本文将聚焦于Web UI测试中容易被忽略的14个关键测试点，例如表单的动态校验、下拉框的完整生命周期、响应式图片处理、弹窗的焦点管理以及深色模式适配等，并提供一份实用的自查阅读详情

兄弟们直接上图

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.display = "block"
    document.getElementById("downicon")!.style.display = "none"
    document.getElementById("upicon")!.style.display = "inline-block"
  }

  // 点击向上箭头
  const onUpClick = () => {
    document.getElementById("asidearea")!.style.overflow = "hidden"
    document.getElementById("asidearea")!.style.textOverflow = "ellipsis"
    document.getElementById("asidearea")!.style.display = "-webkit-box"
    document.getElementById("downicon")!.style.display = "block"
  }

	// 四行的代码高度是75px
  useEffect(()=>{
    draggleRef.current!.clientHeight > 75 ? document.getElementById("asidep")!.style.overflow = "unset" : document.getElementById("downicon")!.style.display = "none"
  },[])



<div id={"asidearea"} className={css.asidearea}>
  <p ref={draggleRef} id={"asidep"}>
  	习我的预习我的预习我的我的预习我的我的预习我的习我的预习我的预习我的我的预习我的习我的预习我的习我的习我的预习我的 
  	<UpOutlined id={"upicon"} style={{cursor:'pointer',display:'none'}}  onClick={onUpClick} />
  </p>
  <div id={"downicon"}><DownOutlined onClick={onDownClick}/></div>
</div>

5.less代码

.asidearea {
      width:166px;
      background-color:#f6f5fc;
      border-radius:5px;
      padding: 8px;
      padding-bottom: 2px;
      margin-top:10px;
      color:#666666;
      font-size:11px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      p {
        overflow: hidden;
      }
      :global {
        .anticon-down {
          position: absolute;
          top: 117px;
          right: 23px;
          cursor: pointer;
        }
      }
    }