javascript - 找出容器中最后一个不完整文本行的长度

Question

是否有一种方法可以使用 JavaScript 找出容器(例如 div 中)中(不完整的)最后一行文本的渲染宽度？

例如，假设我有以下 HTML:

    <div style="display: table-cell; text-align: justify">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

如果 div 不够宽，浏览器会将文本分成多行，可能如下所示:

Lorem ipsum dolor sit amet,  consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.

如何从 JavaScript 中找出最后一行(“dolore magna aliqua”)的渲染宽度(以像素为单位)？

Answer 1

在这里，这可能会有帮助，这就是你想要的哈？

查看 jsfiddle 的直播

$(".borded-textbox").each(function(index, elem) {
  $(elem).append('<span class="endline"></span>')
  var endline = $(elem).find(".endline");
//var sizeOfDiv = $(".borded-textbox").width();
  var sizeOfLeftSpace = parseInt(endline.offset().left);

  endline.css('width', parseInt(endline.offset().left));  
   endline.addClass('processed');
  $(".length").append(sizeOfLeftSpace);
});