[JavaScript知识库]获取字符串的像素长度

获取字符串的像素长度

该方法是通过正则来实现的，其中str参数是要测的字符串，font_size是字符串的字体大小，返回的就是字符串的像素长度了。

const getLenPx=(str:string, font_size:number) =>{
    let str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length;
    return str_leng * font_size / 2
}

该方法可以用在根据字符串的长度的不同来进行不同的显示。
比如当文字过长时，我们想让其截断，显示省略号，并使用气泡组件包裹来达到鼠标放上去显示完整内容，但文字未过长就不会显示气泡:

<div>
    {getLenPx(str, 14) > 130 ? (
        <Popover
            content={str}
            title={null}
            overlayStyle={{ width: '200px' }}
            arrowPointAtCenter
        >
            <div
                style={{
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    width: '110px',
                    whiteSpace: 'nowrap',
                }}
            >
                {str}
            </div>
        </Popover>
    ) : (
        <div>{str}</div>
    )}
</div>