当文本具有特殊字符时,offsetWidth计算不正确

offsetWidth not calculated properly when text has a special character

本文关键字:offsetWidth 计算 不正确 特殊字符 文本      更新时间:2023-09-26

我正在为我的场景查找文本宽度。这是我的代码(简单示例)

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);

当我在文本中使用标记(<>)时,它没有被考虑(

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

如何解决?

这是因为<textinbrackets>已被呈现为html元素。如果您检查文本,您会看到<textinbrackets>是一个html元素。

只需将"<"替换为

&lt;

和">"带

&gt;

所以,你的文本看起来像

var text = "Country &lt;textinbrackets&gt; and some following text";

如果您不想更改文本,请使用此选项。

textObj.innerText = text;