【web样式分析】超出俩行展示 更多_js实现超过两行查看更多

设计稿如图

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

这时候就要换种方式了，

1. 父元素，高度写死，overflow hidden

height: 42px;
overflow: hidden;
1
2

2. 【更多】绝对定位到段落末尾，代码略。
3. 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("
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/76806