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

是否有可能以某种方式测量具有多个中断/返回的段落中最后一行文本的长度？

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] 

注意：文本中没有手动中断。 它包含在一行文本中，例如，一个

标记。

Answer 1

在字符串的最末端添加零宽度元素并测量其左偏移量应该足够了。

HTML

 
…text… 

JS

 // NOTE: This assumes LTR text! // Using JQuery for simpler code var $el = $("#text"); var originalText = $el.html(); $el.html(originalText + ""); alert($("#cursor").offset().left + "px"); $el.html(originalText); 

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

Answer 2

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

HTML

 
 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.  

JS

 $(document).ready(function() { var content = $('#demo').html(); content = content.replace(/(\w|\s)/g, '$1'); $('#demo').html(content); // Check each  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：

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

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

小（延迟）更新

您可能想要更改：

 /(\w|\s)/g 

类似于：

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

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

Answer 3

编辑：这是在澄清之前写的，段落中没有换行符。 对不起，不适用。

如果你在字符串的开头和结尾修剪空格（即段落），然后拆分换行符并取结果的最后一个元素，你应该接近得到你想要的东西。

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

http://jsfiddle.net/xbFAx/