7

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

例如，在这个框中，在“...like this”之后有一个新行，在“...where it”之后有一个新行，在“...is insert”之后有两个。

4

2 回答 2

2

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

这一切都是为了将​​一些包含文本和/或照片的标准 HTML 元素转换为 HTML5 画布。不幸的是，'.fillText()' 方法不够聪明，无法为我破坏一段文本，所以我需要“手动”检测每一行。

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

至于手动插入的换行符，它们在 HTML 中专门表示，由textareas 中的\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);
    }
}
于 2012-06-28T08:23:11.913 回答
1

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

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);
于 2012-06-27T19:07:22.430 回答