js怎么精确判断单行超出

function isTextOverflow(element) {
    // 创建一个隐藏的canvas元素
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    
    // 设置字体样式与目标元素一致
    context.font = window.getComputedStyle(element).font;
    
    // 测量文本的实际宽度
    const textWidth = context.measureText(element.textContent).width;
    
    // 获取容器的宽度
    const containerWidth = element.offsetWidth;
    
    // 判断文本是否超出容器宽度
    return textWidth > containerWidth;
}

// 使用示例
const targetElement = document.getElementById('your-element-id');
if (isTextOverflow(targetElement)) {
    console.log('文本超出容器宽度');
} else {
    console.log('文本未超出容器宽度');
}