获取文本段落中的最后一行的宽度 [英] Get width of last line in a paragraph of text

问题描述

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

Is it possible to somehow measure the length of the last line of text in a paragraph that has multiple breaks / returns?

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

Note: There are no manual breaks in the text. It is a single line of text wrapped inside, let's say, a <p></p> tag.

推荐答案

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

It should be sufficient to append a zero-width element at the very end of the string and measure its left offset.

HTML

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/

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

这篇关于获取文本段落中的最后一行的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！