实际做项目的时候，有时候会遇到多语言的问题，除了配置locale以外，我们还需要关心一些特殊文字的适配，比如泰文、阿拉伯文等，都特别的长，长度难以估计，常常令人头疼。

有时候也会遇到这样的面试场景，给一个固定100px的button，如何适配不同的语言，不撑爆btn，同时不能用省略号…

下面就介绍下如何有效解决此类问题：

解题思路：

先设定一个默认字体大小，比如30px，核心是通过方法获取内容的原始长度，假设允许展示的区域长度为了90px，获取到字体原始长度为180px，那么接下来就可以改成15px，或者同比例缩放scale()到适当的尺寸。

1、利用隐藏inline-block，获取原始宽度

<div id="textWidth"></div>

let txtDiv = document.getElementById("textWidth");
txtStr = "前端生存指南";
txtDiv.style = "font-size:30px;display:inline-block;visibility:hidden;";
txtDiv.innerText = txtStr;
console.log(txtDiv.offsetWidth)
console.log(txtDiv.clientWidth)
console.log(txtDiv.scrollWidth)

这里顺便介绍下盒模型中获取box的

scrollWidth：是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：是对象看到的宽度（不含边线,即border），对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）。对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

//不考虑兼容性的情况
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

2、利用measureText方法获取文字的宽度

<!-- html -->
<canvas id="myCanvas"></canvas>

//JS
const ctx = document.getElementById("myCanvas").getContext("2d")
ctx.font = "50px Arial" //需要提前设置
const txt = "前端生存指南"
let w = ctx.measureText(txt).width
console.log(w)

measureText()方法的用法

TextMetrics measureText(DOMString text)

在canvas绘图环境中，measureText()方法可以度量字体的宽度。measureText()方法返回了一个包含width属性的TextMetrics对象

注意：在调用measureText()之前设置好字型

在使用measureText()方法时，常见的错误就是在调用完该方法之后，才去设置字型。因为measureText()方法是基于当前字型来计算字符串宽度的，因此调用方法后采取改变字型，所返回的宽度不能反映出那种字型来度量的是实际文本宽度。

总结

以上是目前主流的两种解法，当然可能还会有其他更妙的方法，可以根据实际情况打包成公共组件，核心考察的还是一个完整的思路。