实现文本默认显示三行多出的...后面跟上查看更多

cyndi_超努力

已于 2022-11-21 09:38:56 修改

阅读量1.2k

点赞数

分类专栏：工作积累文章标签： css html 前端

于 2022-11-21 09:33:16 首次发布

本文链接：https://blog.csdn.net/m0_66722601/article/details/127958066

版权

工作积累专栏收录该内容

39 篇文章 1 订阅

订阅专栏

html代码:

  <div>
       <span>文本标题:</span>
       <span>这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行.这里显示判决结果，文本可以超过一行，超过后换行。这里显示判决结果，文本可以超过一行，超过后换行.
       </span>
 </div>

css代码:

div span:nth-child(2){
    display: inline-block;
    font-family: 'PingFangSC-Regular';
    font-size: .14rem;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
    line-height: .24rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: left;
}

js代码:

function chuliText() {
  // 处理页面中字体内容超过3行...并出现查看更多
  let text = $("div span:nth-child(2)");
  let hg = text.css("line-height").split("p")[0];
  let g = text.css("height").split("p")[0];
  let text2 = text.text();
  if ((hg * 3).toFixed(0) == g*1) {
    text.html(
      text2.slice(0, 160) +
        "..." +
        '<a style="color:blue;cursor: pointer;" class="more">查看更多</a>'
    );
  }

  //  点击查看更多或者收起
  text.click(function (e) {
    if (e.target.className == "more") {
        text.css({ "-webkit-line-clamp": "10000" });
        text.html(
        text2 + '<a style="color:blue;cursor: pointer;" class="up">收起</a>'
       );
     } else if (e.target.className == "up") {
      text.css({ "-webkit-line-clamp": "3" });
      text.html(
        text2.slice(0, 160) +
          "..." +
          '<a style="color:blue;" class="more">查看更多</a>'
      );
    }
  });
}