javascript - 当文本具有特殊字符时，offsetWidth 无法正确计算

Question

我正在尝试找到适合我的场景的文本宽度。这是我的代码(简单示例)

var text = "Country <textinbrackets> and some following text";
var textObj = document.createElement('text');
$(textObj).attr({ 'id': 'measureTex'});
document.body.appendChild(textObj); 
textObj.innerHTML = text;
alert("Text Width:" + textObj.offsetWidth + " " + "Text Height:" + textObj.offsetHeight);

当我在文本中使用标签时(<>)，它没有被考虑()，所以我无法找到文本的确切宽度。文本的实际宽度为 323，但返回为 212..如何找到准确的宽度..

示例链接:http://jsfiddle.net/W4Km8/7047/

如何解决？

Answer 1

那是因为<textinbrackets>已被渲染为 html 元素。如果您检查文本，您将看到 <textinbrackets>作为 html 元素。

只需将“<”替换为

<

和 ">"与

>

所以，你的文字看起来像

var text = "Country <textinbrackets> and some following text";

如果您不想更改文本，请使用它。

textObj.innerText = text;