获取文本段落中最后一行的宽度

Question

有没有办法测量一个具有多个换行符的段落中最后一行文本的长度？

          Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Donec id elit non mi porta gravida at eget metus. Nulla vitae
          elit libero, a pharetra augue. Nullam id dolor id nibh
          ultricies vehicula ut id elit. Vivamus sagittis lacus vel
[here] ->|augue laoreet rutrum faucibus dolor auctor.|<- [to here]

注意：文本中没有手动换行符。它是一行文本，包裹在一个 <p></p> 标签内。

- Andrew Tibbetts

---

也许这个链接对你有所帮助：https://dev59.com/EHVD5IYBdhLWcg3wAWsO - Peter

有一种技术是将字符串克隆到一个隐藏的内联元素中进行测量（例如将输入元素自动调整大小为其值）。所以，我想问题在于它是段落的最后一行。 - Andrew Tibbetts

Answer 1

在字符串的末尾添加一个零宽度元素，并测量其左偏移量应该就足够了。

HTML

<p id="text">…text…</p>

JS

// NOTE: This assumes LTR text!
// Using JQuery for simpler code

var $el = $("#text");
var originalText = $el.html();

$el.html(originalText + "<span id='cursor'></span>");
alert($("#cursor").offset().left + "px");
$el.html(originalText);

JSFiddle: http://jsfiddle.net/Ca4fF/1/

- Nelson Menezes

---

这是一个非常聪明、创造性的简单解决方案。我从未像这样看待过它，点赞 +1。 - David Thomas

这太棒了。然后，显而易见嘛。非常简单又优雅。我觉得使用.position()比使用.offset()更合适，但这个方法是通过的！ - Andrew Tibbetts

在我的情况下不起作用，因为段落围绕着一个浮动的图像。 - Nick Manning

真聪明！谢谢老板！ - markzzz

Answer 2

尝试这个http://jsfiddle.net/Qb9WX/3/

HTML

<div id="demo">
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
    Donec id elit non mi porta gravida at eget metus. Nulla vitae
    elit libero, a pharetra augue. Nullam id dolor id nibh
    ultricies vehicula ut id elit. Vivamus sagittis lacus vel
    augue laoreet rutrum faucibus dolor auctor.
</div>

JS

$(document).ready(function() {
    var content = $('#demo').html();
    content = content.replace(/(\w|\s)/g, '<span>$1</span>');
    $('#demo').html(content);

    // Check each <span> for its offsetTop
    var highest_top = 0;
    var tmp_top = 0;
    $('#demo span').each(function() {
        tmp_top = $(this)[0].offsetTop;
        if (tmp_top > highest_top) {
            highest_top = tmp_top;
        }
    });

    // Collect total width
    var total_width = 0;
    $('#demo span').each(function() {
        check_top = $(this)[0].offsetTop;
        if (check_top == highest_top) {
            total_width += $(this).width();
        }
    });

    console.log(total_width);
});

你可以根据自己的需求进行微调。

对于我来说，在fiddle中它给出了88像素：

您可以在进行计算后将原始（不带）字符串缓冲回元素中。这样，您就不需要保留混乱的元素。

最后注意一点：如果您使用外语字符（例如德语的ß或俄语/日语等），则正则表达式可能无法匹配\w。您需要扩展有关字符集匹配的知识。但这超出了本问题的范围。

小（延迟的）更新

您可能想要更改：

/(\w|\s)/g

变成类似于：

/([^\n\t])/g

这样你就可以匹配除制表符和换行符以外的任何内容。如果仅匹配字母和空格，则像逗号等重要标点可能会被忽略，从而导致像素计数有所偏差。

- user1467267

Answer 3

编辑：此内容是在得知段落中没有换行符之前编写的。抱歉，不适用。

如果你去掉字符串（即段落）开头和结尾的空格，然后按照换行符拆分并取结果的最后一个元素，你就可以接近你想要的东西了。

<div class='input'>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Donec id elit non mi porta gravida at eget metus. Nulla vitae
elit libero, a pharetra augue. Nullam id dolor id nibh
ultricies vehicula ut id elit. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
</div>
<div class='result'>
</div>

和

$('div.result').html( "" )
$('div.input').each( function(){
    var lines = $(this).html(
       ).replace(/^\s+/, ''
       ).replace(/\s+$/,''
       ).split("\n")
    $('div.result').append("<p><kbd>" + 
       lines[lines.length-1].length + 
       "</kbd>: <i>"+lines[lines.length-1]+"</p>" 
    )       
})

http://jsfiddle.net/xbFAx/

- erik258

---

我没有表达清楚——文本中没有手动换行。它是一行文本，被包裹在一个 <p></p> 标签内。 - Andrew Tibbetts

哦，棘手了。那就难多了。而且很可能取决于显示特性。抱歉，我想不出如何做到这一点。 - erik258