Question

我有一个带有文本溢出集的div中的span：

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

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

$("#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))

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

Answer 2

这是我提出的另一个答案，虽然它有时可能不起作用，例如，跨越显示块样式和父节点填充。位置也可以是绝对的。这可以通过创建新元素，将其附加到父元素或正文，测量其宽度然后将其删除。

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：省略号;}并在测量后再添加它。

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

对我而言，目前这是最佳解决方案（见jsfiddle）。我有一个相对复杂的布局，它有很多相对的长度，并且需要更多的时间来重现这种布局。

使用text-overflow获取文本宽度：省略号;在IE11

3 个答案: