如何在Vue3中计算无换行div文本行数以控制CTA显示？

要实现根据文本行数与-webkit-line-clamp的比较来显示/隐藏CTA，核心是计算文本实际行数并和截断行数阈值对比，以下是完善后的代码方案：

完善后的Script代码 #

import { ref, computed, watch } from 'vue';

const isExpanded = ref(true);
const information = ref(); 
const isTextTruncated = ref(false);

const toggleCta = computed(() => isExpanded.value ? '展开' : '收起');

// 监听元素引用和展开状态的变化
watch([information, isExpanded], () => {
  const element = information.value;
  if (!element) return;

  const computedStyle = window.getComputedStyle(element);
  const lineClamp = parseInt(computedStyle.getPropertyValue('-webkit-line-clamp'), 10);
  
  // 文本展开时无需判断，直接隐藏CTA
  if (!isExpanded.value) {
    isTextTruncated.value = false;
    return;
  }

  // 获取行高，处理line-height为normal的情况
  let lineHeight = parseFloat(computedStyle.lineHeight);
  if (isNaN(lineHeight)) {
    lineHeight = element.clientHeight / lineClamp;
  }

  // 计算实际文本行数：滚动高度除以行高，向上取整
  const textLineCount = Math.ceil(element.scrollHeight / lineHeight);
  // 判断是否超过截断行数
  isTextTruncated.value = textLineCount > lineClamp;
}, { 
  immediate: true, // 初始化时立即执行一次判断
  flush: 'post' // 确保DOM更新后再计算，避免获取到不准确的高度
});

关键逻辑说明 #

• 监听依赖：同时监听information元素引用和isExpanded状态，两者变化都会影响文本显示状态
• 行高兼容：处理line-height: normal的场景，通过元素当前高度除以截断行数反推行高
• 行数计算：用元素scrollHeight（文本实际所需高度）除以行高，向上取整得到实际行数
• 初始化判断：添加immediate: true保证页面加载时立刻执行判断，避免CTA初始状态错误
• DOM时机控制：flush: 'post'确保DOM更新完成后再计算高度，避免数值不准确

模板与样式保持不变 #

Template代码 #

<div ref="information" :class="isExpanded ? 'truncate' : ''">
  {{ data?.information }}
</div>
<span
  v-if="isTextTruncated"
  @click="isExpanded = !isExpanded"
>
  {{ toggleCta }}
</span>

Styles代码 #

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

补充说明 #

• 该方案仅适用于-webkit-line-clamp实现的文本截断场景
• 若元素存在内边距或边框，计算行高时需减去上下内边距/边框值后再进行计算

内容的提问来源于stack exchange，提问作者Pianoc