Question

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

例如，在这个框中，在“......喜欢这个”之后有一个新行，一个在“... where it”之后，两个在“...之后插入”。

Answer 1

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

这是用于转换包含文本的一些标准HTML元素的全部内容和/或将照片放入HTML5画布。不幸的是， '.fillText（）'方法不够聪明，无法破解一段文字我，所以我需要“手动”检测每一行。

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

对于手动插入的换行符，它们在HTML中具体表示，可以是textareas中的\n或\r字符，也可以是<br \>等HTML元素。因此，在测量文本之前，您可能希望按段落分割它。

在textareas：

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

Answer 2

我不确定你想要实现的目标。但是这里有一个简单的技巧可以用来识别单个单词的位置。见fiddle

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

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

2 个答案: