javascript - 使用 text-overflow : ellipsis; at IE11 获取 span 中的文本宽度

Question

我有一个跨度，它位于一个带有文本溢出集的 div 中:

<div id="parent" style="width: 50px; overflow: hidden; text-overflow: ellipsis;">
  <span id="child">exampleasdaadasdsfdgs</span>
</div>

当我尝试获取 span 中文本的宽度时，我尝试了:

$("#child").width();

在大多数浏览器中它可以工作，但在 IE 11(可能更多)中它不能。当我删除“文本溢出:省略号；”它显示了正确的文本长度。

我做了一个fiddle用于测试。

除了获取文本的长度并将其乘以字体大小之外，是否有一种好的(而且不会很慢)方法来使用 IE11 获取宽度？

Answer 1

如果您知道字体大小和字体系列，您可以使用canvas measureText() 来获取文本宽度

function textWidth(text, font) {
 font = font || "16px Arial"
 var c = document.createElement('canvas');
 var ctx = c.getContext("2d");
 ctx.font = font;
 return ctx.measureText(text).width;
}

var myText = $('#mySpan').html();
console.log(textWidth(myText))

请记住，它只有在您事先知道字体大小和字体系列时才有效。