如何使用JavaScript根据元素data属性值实现文本截断功能

原有代码失效原因 #

• 函数名拼写不一致：遍历元素时调用的函数名为truncate，但实际定义的函数名为turnecate，直接导致函数找不到，逻辑完全不执行。
• 取值类型未处理：getAttribute拿到的data-truncate值是字符串类型，虽然JS会做隐式类型转换，但极端场景下会出现判断逻辑异常。
• 截断结果未回写DOM：截断后的文本只打印到了浏览器控制台，没有更新到页面元素上，视觉上看不到任何效果。

可直接运行的修复代码 #

<p data-truncate="10">This is a paragraphasdasd asda ascevgr .</p>
<p data-truncate="30">This is a paragrap fdg  heg hasdasd asda ascevgr .</p>
<p data-truncate="12">This is a paragraphasdasd asda ascevgr .</p>
<p data-truncate="14">This is a paragr df fdg 534t34 34 aphasdasd asda ascevgr .</p>
<p data-truncate="16">This is a paragra 34t  gh jy rth phasdasd asda ascevgr .</p>
<p data-truncate="12">This is a paragr 3688 hjhj aphasdasd asda ascevgr .</p>
<p data-truncate="5">This is a paragraph  der ert rt asdasd asda ascevgr .</p>
<p data-truncate="90">This is a paragraph  der ert rt asdasd asda ascevgr .</p>
<script>
    const truncateNodeList = document.querySelectorAll("[data-truncate]");
    truncateNodeList.forEach(handleTruncate);
    function handleTruncate(el) {
        const maxLen = parseInt(el.dataset.truncate, 10);
        const originText = el.textContent;
        if (originText.length > maxLen) {
            el.textContent = originText.slice(0, maxLen) + '...';
        }
    }
</script>

逻辑说明 #

• 统一函数命名，保证调用和定义完全匹配，解决基础报错问题。
• 用parseInt将属性值显式转为10进制数字，也可以直接用datasetAPI读取自定义属性，写法更简洁。
• 截断后的文本直接赋值给元素的textContent，页面会实时渲染截断效果。
• 文本长度未超过设定值时，保留原始内容不做修改。

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