如何获取多行文本的一行宽度使用 Javascript

Question

行铁：

 <p style="width: 300px;">asdasd sa das d asd a sd as das dasdasdasdasd saddasdasdasdasd asdasdsd</p>

P 的宽度为 300px，但每一行都更小。 我需要为每一行计算它。 屏幕：多行块

Answer 1

我不知道js的方式，但您可以使用jQuery：

   <p id="demo" style="white-space:pre">
    Line 1

    Line 2

    Line 3

    Line 4 Blah

    Line 5
    </p>

JQUERY：

  $(function(){
var text =  $.trim($('#demo').text());
// this may vary browser to browser...
var text_w_no_empty_lines = text.replace(/[\r\n]+/g, '\n');
var lines = text_w_no_empty_lines.split('\n');
// line number you want  total - 1
var line_5 = lines[4];
// .tick { white-space:nowrap;display:inline-block;display:none }
alert( $('<p class="tick">').html(line_5).appendTo('body').width() )
}
);

Answer 2

也许为时已晚，但我有同样的要求，我想到了一个解决方案。 当您选择一个 div 时，您可以获得每个选择框的边界矩形，因此，如果您有多行，您将获得每行的宽度和 position。

window.getSelection().selectAllChildren(document.querySelector("p#element"));
var selection = window.getSelection();
var range = selection.getRangeAt(0); 
var rects = range.getClientRects();
console.log(rects);