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

Answer 2

在纯JavaScript，MWE中实现aladin8848的巧妙构思。

<html>
  <head>
    <meta charset="utf-8"/>
    <script>
      function lastLineLength() {
        var thisDiv = document.querySelectorAll('#this')[0];
        var tmpSpan = document.createElement( 'span' );
        thisDiv.appendChild( tmpSpan );
        var x = tmpSpan.offsetLeft;
        thisDiv.removeChild( tmpSpan );
        thisDiv.appendChild( document.createTextNode( x ) );
      }
    </script>
  </head>
  <body onload="lastLineLength()">
        <div id="this" style="display: table-cell; position: relative">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua.
        </div>
  </body>
</html>

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

2 个答案: