CSS 设置多行文本省略号 ...

🚀 🎉 🔥 CSS 设置多行文本省略号 ...

    .box{
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-line-clamp: 3;
      /* 行数 3 */
      -webkit-box-orient: vertical;

    }

    
    .text {
        font-size: 38rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; 
    }

js 计算 容器高度 = line-height * lines

::after{
 content: "...",
}

refs

https://codepen.io/xgqfrms/pen/NWxejZR

https://codepen.io/xgqfrms/pen/qeZpEd

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---