javascript - 如何根据字体大小计算字符宽度。

标签 javascript html css

我正在尝试计算适合 div 一行的字符数并剪掉其余部分,尽管 text-overflow 是一个选项我宁愿计算适合的字符串长度正确地在其中。一个字符的字体大小是否几乎等于它的宽度,如果不是,你如何计算它的宽度,包括文本间距和空白宽度。

附言- 在标记这个问题之前,请知道我已经完成了大部分问题和答案,但没有一个是令人满意的。

最佳答案

我会这样做的一种方法是检查 div 中是否还有足够的空间。为此,您需要创建一个相同的 div,然后从克隆的 div 中慢慢删除一个字符,直到原始 div 的宽度大于或等于克隆的 div。

divClone.textContent = text
document.body.appendChild(divClone)
while(divClone.clientHeight > originalDiv.clientHeight) {
    divClone.textContent = divClone.textContent.substring(0, divClone.textContent.length-1)
}
originalDiv.textContent = divClone.textContent

完成后你可以删除克隆的div

关于javascript - 如何根据字体大小计算字符宽度。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43874620/

相关文章:

javascript - 在服务器端访问 jQuery 控件?

html - 如何用 <i class ="icon-xyz-chevron down-rotation"></i> 替换我的默认选择框下拉图标

css - 选择/选项中的错误光标,IE

javascript - 为数组的某些值设置样式

javascript - 在对象数组中对动态键进行分组

javascript - 在 JavaScript 正则表达式中使用 {1}+ 所有格量词时出现正则表达式错误

javascript - d3.js 圆形悬停动画

javascript - 带有数据表的多个引导选项卡。子行仅在其中一个选项卡上打开

javascript - 从 ios 应用程序调用 javascript 函数

css - FlatList 的最后一项从底部修剪掉