一个貌似很简单,但写起来也不简单的问题—对于多行文字,超出...显示。
通过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