【web样式分析】超出俩行展示更多

最新推荐文章于 2024-05-07 15:26:32 发布

左钦杨

最新推荐文章于 2024-05-07 15:26:32 发布

阅读量435

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/sinat_29843547/article/details/129955069

版权

在这里插入图片描述
设计稿如图

首先 CSS 的超出两行省略 … 在末尾，但是无法判断在不足两行的时候不需要展示【更多】

这时候就要换种方式了，

父元素，高度写死，overflow hidden

height: 42px;
overflow: hidden;

【更多】绝对定位到段落末尾，代码略。
js 判断是否超出超出展示【更多】

// 判断文案实际行数
this.$nextTick(() => {
  const height = this.$refs.descBox.scrollHeight;
  const lineHeight = +window
    .getComputedStyle(this.$refs.descBox)
    .lineHeight.match(/\d+\.*\d+/g)[0];
  this.isMoreThan2Line = height / lineHeight > 2;
  console.log("🚀 ~ file: _id.vue:371 ~ this.$nextTick ~ this.isMoreThan2Line:", this.isMoreThan2Line)
});