如何使用jQuery获取指定宽度div内的可见字符数量？

嘿，这个问题得用点巧妙的方法来解决，因为不同字符（比如英文、中文）的宽度不一样，直接按div宽度除以单个字符宽度的硬算方式误差很大。最靠谱的思路是用一个和目标div样式完全一致的隐藏辅助元素，逐个添加字符来测试宽度，直到辅助元素的宽度超过目标div的宽度，此时就能得到可见的字符数量了。

下面是具体的实现代码，我给你加了详细注释：

$(document).ready(function() {
    // 获取目标div元素
    const targetDiv = $('#d1');
    // 获取目标div的文本内容和实际宽度
    const fullText = targetDiv.text().trim();
    const targetWidth = targetDiv.width();
    
    // 创建一个隐藏的辅助div，复制目标div的关键样式（字体、字号这些影响字符宽度的属性）
    const helperDiv = $('<div></div>').css({
        position: 'absolute',
        visibility: 'hidden', // 隐藏但仍保留布局空间，方便计算宽度
        whiteSpace: 'nowrap', // 禁止文本换行，模拟原div的溢出状态
        font: targetDiv.css('font'),
        fontSize: targetDiv.css('fontSize'),
        fontFamily: targetDiv.css('fontFamily'),
        lineHeight: targetDiv.css('lineHeight'),
        padding: targetDiv.css('padding'),
        border: targetDiv.css('border')
    }).appendTo('body');
    
    let visibleCharCount = 0;
    // 逐个添加字符到辅助div，测试宽度变化
    for (let i = 0; i < fullText.length; i++) {
        helperDiv.text(fullText.substring(0, i + 1));
        // 如果辅助div宽度超过目标div，说明当前字符已经溢出，停止循环
        if (helperDiv.width() > targetWidth) {
            visibleCharCount = i;
            break;
        }
        // 如果循环到最后一个字符都没溢出，说明所有字符都可见
        if (i === fullText.length - 1) {
            visibleCharCount = fullText.length;
        }
    }
    
    // 输出最终结果
    console.log('可见字符数量：', visibleCharCount);
    // 移除辅助元素，避免污染DOM结构
    helperDiv.remove();
});

关键点说明： #

• 为什么要用辅助元素？因为原div设置了overflow:hidden，我们没法直接从原div获取溢出的字符信息，用隐藏的辅助元素可以完美模拟原div的文本渲染环境，保证测试宽度的准确性。
• 必须复制原div的字体相关样式，不然辅助元素的字符宽度和原div不一致，测试结果会出现偏差。
• 循环过程中逐个累加字符，直到辅助div宽度超过目标div，此时前i个字符就是刚好能完整显示的数量。

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