获取字符串的像素长度

字符串像素长度检测与动态显示策略

最新推荐文章于 2023-05-04 11:49:19 发布

原创最新推荐文章于 2023-05-04 11:49:19 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #typescript #前端

前端学习专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了一种通过正则表达式计算字符串像素长度的方法，用于根据文本长度动态调整显示。例如，在文字过长时，采用气泡提示组件展示完整内容。内容涉及到前端开发中的文字截断和样式控制，以及如何利用Popover组件实现详情展示。

获取字符串的像素长度

该方法是通过正则来实现的，其中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>