Vue组件中正确检测line-clamp文本是否截断的方法求助

当前代码的核心问题 #

• DOM引用错误：information ref初始值设为true，应设为null以绑定模板中的DOM元素
• CSS属性获取方式错误：使用了jQuery的.css()方法，原生JS需用getComputedStyle获取计算后样式
• 未处理DOM未挂载场景：组件初始化时DOM未渲染，直接访问会触发报错
• 类型不匹配：获取到的-webkit-line-clamp是字符串，未转数字就进行数值比较
• 计算逻辑不完整：computed没有返回false的分支，默认无返回值

修复后的完整代码示例 #

SCRIPT #

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

const isExpanded = ref(false); // 初始默认收起，展示截断效果
const information = ref(null); // DOM引用初始化为null
const data = ref({
  information: '需要检测的长文本内容...'
});

// 切换按钮文本计算
const toggleCta = computed(() => isExpanded.value ? '收起' : '展开');

// 检测文本是否被截断
const isTextTruncated = computed(() => {
  if (!information.value) return false;
  
  const element = information.value;
  const computedStyle = window.getComputedStyle(element);
  const lineClamp = parseInt(computedStyle.getPropertyValue('-webkit-line-clamp'), 10);
  
  if (isNaN(lineClamp)) return false;
  
  const actualLineCount = element.getClientRects().length;
  return actualLineCount > lineClamp;
});

// 监听文本内容变化，确保DOM更新后重新计算
watch(() => data.value.information, () => {
  nextTick(() => {
    // computed会自动重新计算，无需额外操作
  });
});

TEMPLATE #

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

STYLE #

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

关键修复点说明 #

• 修正DOM引用：information ref初始化为null，才能正确绑定模板中的DOM元素
• 正确获取样式：用window.getComputedStyle获取最终生效的CSS属性，避免直接读取样式表的偏差
• 类型转换处理：将-webkit-line-clamp的字符串值转为整数，确保数值比较逻辑正确
• 空值安全判断：computed中先校验元素是否存在，避免组件初始化阶段的报错
• 完善逻辑分支：默认返回false，确保文本未截断时不显示切换按钮
• 监听内容变化：结合watch和nextTick，保证文本更新后DOM渲染完成再计算截断状态

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