如何确定 HTML 元素文本中“新行”的位置

How can I determine the positions of "new lines" in the text of an HTML element?

本文关键字：新行 位置 何确定 HTML 元素 文本      更新时间：2023-09-26

在 HTML 元素（如 DIV）中添加长文本，该元素将包装该文本。实际上，就像这个问题文本一样。如何从这样的 HTML 元素中获取文本并确定它中断的位置？即插入新行的位置。

例如，在此框中，在"...像这样"，一个接一个"...它在哪里"和两个之后"...入。

所以，问题实际上是如何在HTML5画布中进行自动换行：

这都是为了转换一些包含文本的标准HTML元素 和/或将照片放入 HTML5 画布。不幸的是， '.fillText（）' 方法不够聪明，无法中断一段文本 我，所以我需要"手动"检测每一行。

您可以做的是measureText随后一次添加一个单词。测量第一个单词，如果它适合容器的宽度（ctx2d.measureText(words).width <= containerWidth），那么您可以添加另一个单词并再次测量。直到单词字符串不适合。如果没有 - 您必须在下一行fillText。

至于手动插入的换行符，它们专门用 HTML 表示，由文本区域中的'n或'r字符或 HTML 元素表示，如 <br '> .因此，在测量文本之前，您可能希望按段落拆分它。

在文本区域中：

var paragraphs = textarea.value.split(''n');

在非表单元素中：

var paragraphs = [];
// getting all <p> and elements in a typical HTML element
// as well as individual text nodes (they are just DOM-nodes),
// separated by <br /> elements
var innerNodes = nonFormElement.childNodes;
for (var i = 0, len = innerNodes.length; i += 1) {
    // if a sub-element has some text in it,
    // add the text to our list
    var content = innerNodes[i].textContent;
    if (content) {
        paragraphs.push(content);
    }
}

我不确定你想实现什么。但这里有一个简单的技巧，您可以使用它来识别单个单词的位置。看到这个小提琴 

var $text = $('#text'),
    breaks = [],
    top;
// wrap words ('w+) and punctuation ('S+) [well, non-word and non-space]
// in <spans> we can easily identify
$text.html($text.text().replace(/('w+|'S+)/g, '<span>$1</span>'));
$text.children().each(function() {
    var $this = $(this),
        _top = $this.position().top;
    if (top === undefined) {
        top = _top;
    } else if (top < _top) {
        top = _top;
        // moved a row down
        breaks.push($this.prev());
        $this.prev().css('color', 'red');
    }
});

console.log(breaks);
相关文章：