获取字符串的像素长度

GCWkuku

于 2022-03-11 17:21:25 发布

阅读量1.4k

点赞数

分类专栏：前端学习文章标签： react typescript 前端

本文链接：https://blog.csdn.net/GCWsuger/article/details/123429541

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

获取字符串的像素长度

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