找出容器中最后一行不完整文本的长度 [英] find out length of last incomplete line of text in container

问题描述

有没有办法用JavaScript来找出容器中（不完整的）最后一行文本的渲染宽度（例如在div中）？

Is there a way, with JavaScript, to find out the rendered width of the (incomplete) last line of text in a container (e.g. in a div)?

例如，假设我有以下HTML：

For example, suppose I have the following 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不够宽，浏览器会将文本分成多行，可能就像这样：

If the div is not wide enough, the browser will break the text into multiple lines, possibly like this:

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

如何找出最后一行的渲染宽度（以像素为单位）（dolore magna aliqua 。）来自JavaScript？

How can I find out the rendered width, in pixels, of the last line ("dolore magna aliqua.") from JavaScript?

推荐答案

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

Here, this could be helpfull, this is what you want ha?

查看 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);
});

这篇关于找出容器中最后一行不完整文本的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！