css省略号展示，兼容性强，js判断几行，不需要定位

有个需求就是要展示省略号，定位的话不太好，没有css样式的省略号好，使用css的省略号的话功能不太够，所以利用了一些技巧，使用浮动之后用伪元素margin值顶替。可以多个展示，可以单个展示。只需要把函数的参数换了就可以。底下是具体代码实现

html 复制代码

<div class="expertise-container">
  <div class="dec">
    <div class="more" v-if="needShowMore[index]">
      ...
      <span @click="toggleExpand(doctor)">详情</span>
    </div>
    <div class="text" ref="textRefs">
      {{ doctor.spec }}
    </div>
  </div>
</div>

css 复制代码

  .dec {
    font-weight: 400;
    font-size: 42px;
    color: #ffffff;
    overflow: hidden;
    .more {
      float: right;
      span {
        font-size: 42px;
        color: #41e8ff;
      }
    }
    .text {
      height: 116px;
      margin-top: -65px;
    }
  }
  .dec::before {
    content: "";
    display: block;
    height: 70px;
  }

js 复制代码

const needShowMore = ref([]); // 数组，记录每个元素是否需要显示"详情"
const textRefs = ref([]);
const textRef = ref(null);
const checkTextOverflow = () => {
  if (textRef.value) {
    const el = textRef.value;
    const style = window.getComputedStyle(el);
    // 创建临时div，保持相同样式
    const temp = document.createElement("div");
    temp.style.cssText = `
                position: absolute;
                left: -9999px;
                top: -9999px;
                width: ${el.offsetWidth}px;
                font-size: ${style.fontSize};
                font-family: ${style.fontFamily};
                line-height: ${style.lineHeight};
                word-break: ${style.wordBreak};
                white-space: ${style.whiteSpace};
            `;
    temp.textContent = el.textContent;
    document.body.appendChild(temp);

    // 计算行数
    const lineHeight =
      parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.4;
    const actualLines = Math.floor(temp.offsetHeight / lineHeight);

    document.body.removeChild(temp);
    needShowMore.value[0] = actualLines > 2;

    // console.log(`元素详情:`, {
    //   scrollHeight: el.scrollHeight + "px",
    //   实际行数: actualLines + "行",
    //   是否显示: actualLines > 2,
    //   文本预览: el.textContent.substring(0, 30),
    // });
  }

  textRefs.value.forEach((el, index) => {
    if (el) {
      // 创建临时元素测量实际行数
      const measureLines = (element) => {
        const text = element.textContent;
        const style = window.getComputedStyle(element);

        // 创建临时div，保持相同样式
        const temp = document.createElement("div");
        temp.style.cssText = `
                    position: absolute;
                    left: -9999px;
                    top: -9999px;
                    width: ${element.offsetWidth}px;
                    font-size: ${style.fontSize};
                    font-family: ${style.fontFamily};
                    line-height: ${style.lineHeight}; 
                    word-break: ${style.wordBreak};
                    white-space: ${style.whiteSpace};
                `;
        temp.textContent = text;
        document.body.appendChild(temp);

        // 计算行数
        const lineHeight =
          parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.4;
        const lines = Math.floor(temp.offsetHeight / lineHeight);

        document.body.removeChild(temp);
        return lines;
      };

      const actualLines = measureLines(el);
      needShowMore.value[index] = actualLines > 2;

      // console.log(`元素${index}:`, {
      //   scrollHeight: el.scrollHeight + "px",
      //   实际行数: actualLines + "行",
      //   是否显示: actualLines > 2,
      //   文本预览: el.textContent.substring(0, 30),
      // });
    }
  });
};

jsd的方法是单个和多个，可以直接定义参数，我是直接拿的ref的值判断的，有能力的直接简化一下就可以，这儿就不过多赘述了。