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

本文介绍如何使用JavaScript解决多行文本超出显示的问题,考虑到浏览器兼容性、文字字节长度差异以及字体大小影响,通过计算字符串字节数、元素尺寸来精确截取文本,实现灵活且兼容的解决方案。
摘要由CSDN通过智能技术生成

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

通过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 offs
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值