在开发中,可能会遇到动态计算字符串的长度的需求,根据容器宽度和字符串的长度,判断是否需要在字符串后拼接省略号展示。
HTML页面中的字符,中文/英文和字符,所占的宽度不同,一个中文字符的间距 约等同于 两个英文或字符 的宽度,所以在计算字符串展示在页面中的真实宽度时候,需要区分中文/英文和字符。
代码如下图:
/**
* 计算显示的字符串
* @param {string} str 要裁剪的字符串
* @param {number} maxWidth 最大宽度
* @param {number} fontSize 字体大小
* @return {string} 显示的字符串
*/
export const fittingString = (str, maxWidth, fontSize = 12) => {
str = (str || '').toString();
const fontWidth = fontSize * 1.2;
const maxLen = Math.floor(maxWidth / fontWidth * 2);
let strLen = 0;
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
strLen++;
}
else {
strLen += 2;
}
if (strLen > maxLen) {
return str.substring(0, i - 1) + '...';
}
}
return str;
};
ASCII表如图: