isTextOverflow(val: string) {
// val:字符串 this.fixedWidth:容器宽度
let fixedWidth = this.fixedWidth
const textElement = document.createElement('div');
textElement.style.width = `${fixedWidth}px`; // 设置固定宽度
textElement.style.whiteSpace = 'spanWidth'; // 使用normal确保文字在需要时自动换行
textElement.style.overflowWrap = 'break-word'; // 确保长单词也会在必要时换行
textElement.style.position = 'absolute';
textElement.style.left = '-9999px';
textElement.style.top = '-9999px';
textElement.style.visibility = 'hidden';
// 设置div的内容为传入的字符串,确保换行符被正确处理
textElement.innerHTML =val ? val.replace(/\r?\n/g, '<br>') : '' // 将换行符替换为<br>标签
document.body.appendChild(textElement);
const lineHeight = parseInt(
window.getComputedStyle(textElement).lineHeight,
10
);
const actualLines = Math.ceil(textElement.offsetHeight / lineHeight);
document.body.removeChild(textElement);
return actualLines > this.maxLines;
}
获取this.fixedWidth:
给需要获取的元素添加ref,需要在DOM渲染完成后执行
getSpanWidth(){
const spanElement = this.$refs.myspan as HTMLElement;
if (spanElement) {
// 获取span的实际宽度
this.fixedWidth = spanElement.offsetWidth - 130;
}
}