Html：文本宽度不同于其字符宽度的总和

我需要计算文本宽度而不将其附加到DOM。为此，我计算并保存每个字符的宽度，即从（A-Z & a-z和其他必要字符）开始。Html：文本宽度不同于其字符宽度的总和

代码：

function calculateCharactersWidth(){ 
    for(var i=65;i<123;i++){ 
     var x = $('<div style="float:left">').text(String.fromCharCode(i)).appendTo('#hiddenView'); 
     charactersWidth[i] = x.width(); 
     remHeight = x.height(); 
    } 
    var x = $('<div style="float:left">').text(String.fromCharCode(45)).appendTo('#hiddenView'); 
    charactersWidth[45] = x.width(); 
    $('#hiddenView').empty(); 
}

，并得到每个字的宽度这样

function getStringWidth(word){ 
    var width=0; 
    for(var i=0;i<word.length;i++){ 
     width=width+charactersWidth[word.charAt(i).charCodeAt(0)]; 
    } 
    return width; 
}

，但是当这个词被追加到DOM。它的宽度不同于计算的宽度。在一些情况下，它相差3-4像素。

即使我们计算的话这样

// css font-weight:bold and font-size:14px 
<div>Absin</div> width = 35.031 

<div>A</div>  width = 10.125 
<div>b</div>  width = 7.797 
<div>s</div>  width = 6.219 
<div>i</div>  width = 7 
<div>n</div>  width = 4.672 

Added width = 35.831

的微小差别将创建words.So的阵列巨大的差别，为什么是的差异，我怎样才能使它发挥作用？

来源

2017-07-24 Android jack - Rajesh Gosemath

什么约两字符之间几乎没有空间？ –

如果你使用'monospace'类型的字体，这个_might_作品 - 否则，我认为[kerning]（https://en.wikipedia.org/wiki/Kerning）可能会让你失望...你可能会更好通过将文本呈现在屏幕上来提供服务，但是具有大的负左边距，因此它不可见 - 感觉很糟糕，但会为您提供更有意义的结果。 –

@AlexanderNied：是的，它适用于等宽字体..但仍然希望使其与其他字体一起使用 –

字体的字距肯定会搞乱你的计算。我不确定为什么你需要这样做，但为什么你不在一个隐藏的元素中打印出你的文本，并取得它的宽度？

function getStringWidth(word){ 
    var x = $('<div style="float:left">').text(word).appendTo('#hiddenView'); 

    return x.clientWidth; 
}

这种方式，您也可以更改样式，字体类型和大小等

来源

2017-07-24 16:42:56 Pierre

不要忘记清理，否则最终可能会有成千上万的DOM节点。我个人只是创建一个，并在每次更新其内容时重新使用它。 – DarthJDG

我第一次尝试这个，但它真的很慢。其实我有大量的单词显示在屏幕上。因此，每个单词它会做append和remove.This是想我想避免。我正在计算，所以我可以使用.html（）。 –

Html：文本宽度不同于其字符宽度的总和

回答

相关问题