获取字符串px宽度

其实就是通过创建画布canvas去获取字符串的宽度,原理非常简单

上代码

/**
 * 获取字符串px宽度
 * @param font 字体样式
 */
String.prototype.pxWidth = function (font = "") {
    let canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas"));
    let context = canvas.getContext("2d");
    if (!!font) context.font = font;
    let metrics = context.measureText(this);
    return metrics.width;
}

直接使用

通过font参数来设置字体的样式,比如String.pxWidth('400 12px Microsoft YaHei UI')

// 正常输出
"CaptainTwo".pxWidth();
// 56.0400390625

// 加了样式
"CaptainTwo".pxWidth("400 12px Microsoft YaHei UI");
// 67.248046875

获取元素文本宽度

/**
 * 获取元素文本宽度
 * @param {HTMLSpanElement} element 
 * @returns 
 */
const obtainTxtWidthByElement = (element = document.createElement('span')) => {
    // 获取Canvas元素
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    // 填充文本样式
    ctx.font = window.getComputedStyle(element).font;
    return ctx.measureText(element).width;
}

为文本加省略号

https://captaintwo.com/archives/ellipsis

文章作者: CaptainTwo
本文链接:
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CaptainTwo
前端 JavaScript HTML
喜欢就支持一下吧