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

Question

我有一个跨度在 div 中，设置了文本溢出：

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

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

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

在大多数浏览器中它可以工作，但在 IE 11（可能更多）中它不能。当我删除 "text-overflow: ellipsis;" 时，它会显示正确的文本长度。

我做了一个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))

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

Answer 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;
}

Answer 3

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

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

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

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

Get width of text in span with text-overflow: ellipsis; at IE11

html

javascript

css

jquery

internet-explorer-11