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>标记。

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/

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

您可以根据自己的需要调整它。

对我来说，它给小提琴88px：

enter image description here

在进行计算后，您也可以将原始（span - 更少）字符串缓冲回元素。这样您就不需要保持杂乱的元素。

最后一点;如果您使用外来字符（如德语ß或俄语/日语/等），则正则表达式可能无法在\w上匹配。您需要扩展您对字符集匹配的了解。但这超出了这个问题的范围。

小（延迟）更新

您可能想要更改：

/(\w|\s)/g

类似于：

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

这样您就可以匹配除标签和换行符之外的任何内容。我注意到，如果只匹配字母和空格，像素数可能有点偏差。它可能会错过重要的逗号和其他阅读标志。

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/

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

3 个答案: