使用文本溢出获取跨度文本的宽度：省略号；在 IE11答案

【问题标题】：Get width of text in span with text-overflow: ellipsis; at IE11使用文本溢出获取跨度文本的宽度：省略号；在 IE11
【发布时间】：2017-11-22 16:31:25
【问题描述】：

我有一个跨度在一个带有文本溢出集的 div 中：

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

当我尝试获取跨度中文本的宽度时，我尝试了：

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

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

我做了一个fiddle 进行测试。

除了获取文本的长度并将其与字体大小相乘之外，是否有一种很好的（并且不会变慢）方法来获取 IE11 的宽度？

【问题讨论】：

只有在使用等宽字体时才能获取文本长度并将其乘以字体大小
这是 IE 中的一个错误，但对于这种特殊情况，您可以读取父级的 scrollWidth 值，它将输出其内容的宽度（即您的跨度）。 jsfiddle.net/em9jap8f

标签： javascript jquery html css internet-explorer-11

【解决方案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))

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

【讨论】：

考虑到您应该能够从样式表中获取字体信息，这是一个相当巧妙的解决方案。
如果没有其他解决办法，我就这么办了。但我正在寻找更好、更优雅的解决方案。
目前我有你的解决方案，并在宽度测量后删除了文本溢出和它（jsfiddle.net/xyqr5zm9/4）。但我不太喜欢这两个想法。
你为什么不创建一个不可见的元素（不透明度：0），测量它，然后删除它。

【解决方案2】：

这是我想出的另一个答案，尽管它有时可能不起作用，例如 span 获取显示块样式和来自父级的填充。位置也可以是绝对的。这通过创建新元素、将其附加到父元素或主体、测量其宽度然后将其删除来实现。

function textWidth(text, parent) {
     var textElement = $('<span style="opacity:0; position: fixed; overflow: visible" class="it_has_similar_style_as_the_one_we_need_to_measure">' + text + '</span>');
     //if you have a parent element, append it here so it can inherit some necessary styles
     if(!parent) {
        $(document.body).append(textElement);
     } else {
        parent.append(textElement);
     }
     var width = textElement.width();
     textElement.remove();
     return width;
}

【讨论】：

【解决方案3】：

我现在使用的解决方案是删除样式 {text-overflow: ellipsis;} 并在测量后再次添加。

$("#parent").css("text-overflow", "clip");
$('#childwidth').html($("#child").width());
$("#parent").css("text-overflow", "ellipsis");

对我来说，这是目前最好的解决方案（请参阅jsfiddle）。我有一个相对复杂的布局，相对长度很大，重现此布局需要更多时间。

【讨论】：