回复 JY 评论 & 实例讲解：如何让文字内容撑满整行？

回复 JY

昨天看到有 JY 在前几天的文章 《如何实现输入框跟随文字内容适配宽度？》 中评论，说好奇 canvas 如何实现计算文字内容宽度？

那今天就来聊聊 canvas 的实现方案。

使用 canvas 计算文字内容宽度

这个其实就是考验我们对 canvas 的了解程度。因为实现方案其实就是利用 canvas 的一个 API CanvasRenderingContext2D.measureText() ，它的返回值就包含当入参内容在 canvas 的宽度值，请看如下示例代码：

const measureWidth = function (text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  // 设置字体样式
  context.font = font;

  // 获取文字内容宽度
  const metrics = context.measureText(text);
  return metrics.width;
};

还是提醒一句，font 的设置非常重要，因为不同字体样式会导致相同文字内容的宽度不一样。

好了，给那位 JY 的回复就完成了。接下来给 JYM 分享一个实例。

根据文字内容数量调整文字大小，让文字内容撑满整行

老样子，话不多说，先上效果。

接下来，我们来看看是如何实现的。

我们先定义 HTML 结构：

获取文字内容宽度值

我们需要获取到 #app 元素的字体相关样式、字体尺寸和文本内容，提供给上文的 measureWidth 方法，来得到文字内容的宽度。

代码如下：

const ele = document.getElementById('app');
const styles = window.getComputedStyle(ele);

// 获取字体相关样式
const font = styles.font;
// 获取字体大小
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);

OK，通过以上代码，我们就得到了文字内容的宽度。

文字内容的新尺寸

我们再通过 #app 元素的内容宽度与文字内容宽度进行计算，得到缩放比。

const scale = ele.clientWidth / parseFloat(measured);

如果还有 JYM 不清楚为什么使用 clientWidth，可以在看完本文之后移步去看我之前写的另一篇文章 《一文读懂 clientWidth、offsetWidth、scrollWidth》。

将缩放比与文字内容的字体大小进行计算，就可以得到文字内容撑满整行时的字体大小。

再将计算后的字体大小赋值给 #app 元素，此时，元素的文字内容就会撑满整行啦。

const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `${scaleFontSize}px`;

跟随浏览器缩放

监听浏览器的 resize 事件，将上面的逻辑进行封装即可。但需要注意的是，resize 的回调函数内，一定要做 防抖/节流。

window.addEventListener('resize' /* callback */);

---

全文完，如果觉得这篇文章对你有用，欢迎 点赞 👍、评论 ✍️、收藏 👀