css超出隐藏并显示展开收起

q249859693

于 2024-08-23 17:17:04 发布

阅读量238

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/q249859693/article/details/141470269

版权

看了几篇文章感觉都很麻烦，还是自己写一下吧

          <div
            class="info"
            style="position: relative;width: calc(100% - 100px)"
          >
            <p style="padding-right:6px" class="info-title">
              {{ item.text }}
              <img
                class="down"
                @click="e => upDown('down', e)"
                src="@/icons/svg/down.svg"
                alt=""
              />
              <img
                class="up"
                @click="e => upDown('up', e)"
                src="@/icons/svg/up.svg"
                alt=""
              />
            </p>
          </div>

//获取了数据页面渲染完之后执行
function xx(){
 const arr = [...document.getElementsByClassName("info-title")];
  arr.forEach((item, index) => {
    console.log(item.clientHeight);
    if (item.clientHeight > 30) {
      item.classList.add("expand");
    } else {
      item.classList.add("noellipsis");
    }
  });
}
function upDown(state, e) {
  console.log(state, e.target);
  console.log(e.target.parentNode);
  if (state == "down") {
    e.target.parentNode.classList.remove("expand");
    e.target.parentNode.classList.add("retract");
  }
  if (state == "up") {
    e.target.parentNode.classList.remove("retract");
    e.target.parentNode.classList.add("expand");
  }
}

  .info {
    width: 100%;

    .info-title {
      position: relative;
      .hidden {
        display: none;
      }
    }
    .noellipsis {
      .down {
        display: none;
      }
      .up {
        display: none;
      }
    }
    .expand {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .down {
        position: absolute;
        right: 4px;
        top: 4px;
      }
      .up {
        display: none;
      }
    }
    .retract {
      .down {
        display: none;
      }
      .up {
        display: inline;
      }
    }
  }

如果多行隐藏的话。
.expand

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

  改为

     overflow: hidden;
     display: -webkit-box;
     word-break: break-all;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;