多行内容超出...显示的JS解决方案

最新推荐文章于 2026-06-18 12:46:34 发布

原创

最新推荐文章于 2026-06-18 12:46:34 发布 · 2.4k 阅读

标签

#javascript #前端 #开发语言 #html5

本文介绍了如何使用JavaScript解决多行文本超出显示省略号的问题，包括考虑浏览器兼容性、中英文字符长度差异以及字体大小的影响。通过计算字符串字节长度、offsetWidth与scrollWidth的比例，动态截取文本并创建临时DOM元素来确保准确性。最后提供了一个可复用的方法。

多行内容超出…显示的JS解决方案

一个貌似很简单，但写起来也不简单的问题—对于多行文字，超出…显示。

通过css可以实现，但受限于浏览器兼容问题，有时候还需要依赖js来实现。

通过js实现，就需要考虑到文字大小，中英文、数字、标点符号所对应的字节长度不一致，如果考虑的不全面，对于不同的文字内容，总会有点差距。

首先，我们需要了解，中文汉字，英文字母，数字以及特殊符号所占的字节长度是不一样的，如果需要计算准确，就不能按照字符串的元素个数去截取，把它们换算成字节数来截取，准确度更高。所以，我们需要一个获取字符串字节长度的方法：

function bitCompute(content) {
   
   
   var total = 0,
    len = arguments[0].length || 0
   for (var i = 0; i < len; i++) {
   
   
    if (content[i].charCodeAt() > 255) {
   
   
     total += 2;
    } else {
   
   
     total += 1;
    }
   }
   return total
}

对于要截取多少内容的字节数，我们需要知悉能放入容器内的字节数与总字节数的比例，展示字节数/总字节数 = offsetWidth / scrollWidth:

function complate() {
   
   
   var offsetWidth = el.offsetWidth;
   var scrollWidth = el.scrollWidth;
   var gap = scrollWidth - offsetWidth;
   var percent = Math.floor(offsetWidth / scrollWidth * 1e3) / 1e3;
   return {
   
   
    gap: gap,
    percent: percent
   }
}