如何计算字符串宽度？

Question

比如

var str = '你好，world'.

放到div中，且div是12px的字体，其他条件不考虑。那么str占得宽度是多少呢？

如果都是汉字，那么写8em是可以的。可以里面有中文和符号，js怎么处理呢？

Answer 1

通用的方法是没有的，不过根据项目情况还是可以算出大致宽度（可用），事实上一般不需要精确宽度

方法一，数学计算

前提：

• 知道font-size / letter-space
• 知道单个字符类型所占宽度

如果有设置media则麻烦一点，需要计算font-size / letter-space

比如常见的中问、英文、数字的组合：

// 已知变量
fontSize
letterSpace
CNCount // 中文字符数
otherCount // 数字、英文字符数

width = (CNCount + otherCount / 2)*(fontSize + letterSpace)

方法二，DOM计算

插入包含字符串元素的DOM，获得该DOM的宽度

方法三，flex自适应（附加方法）

考虑到需要计算文字宽度一般用于配合text-overflow: ellipsis，类似这样

这时可以换个思路，用flex实现：

.container {
    dispaly flex
}
.tab-item {
    flex 1 1 auto
}
.current { // 当前tab
    flex 0 0 auto
}

Answer 2

这个算不出来，宽度不仅仅和字号有关，还有字体，间距等等有关。最好说说你的意图，觉得你考虑的方向不对

Answer 3

用canvas的measureText()API，倒是可以算出来，达到你的效果。但是，很显然，特定加到canvas里面去算，会显得多余，多此一举。
//可能，加入间距这些，那就真的不好算了。

Answer 4

我有一计, 应该可行.
把 div 设为 inline,
https://jsfiddle.net/afqkt0d1/1/

不可替换的内联元素盒的内容宽度是它里面渲染的内容（的内容宽度）（在所有子级的相对偏移之前）
http://www.ayqy.net/doc/css2-...

还有把 div 设为, 浮动或者 absolute, fixed 定位应该也可以, 这样就相当于让 div 拥有了包裹性.

包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度

http://www.zhangxinxu.com/wor...