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

Question

在HTML元素(如DIV)中添加长文本时,该元素会包装该文本.实际上,正好像这个问题文本一样.如何从这样的HTML元素中获取文本并确定它在哪里中断？即插入新行的位置.

例如,在这个框中,在"... like this"之后有一个新行,一个在"... where it"之后,两个在"...之后插入".

Answer 1

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

\n\n

\n

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

\n

\n\n

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

\n\n

至于手动插入的换行符，它们在 HTML 中具体表示，要么由文本区域中的\\n或\\r字符表示，要么由 HTML 元素表示，例如<br \\>. 因此，在测量文本之前，您可能需要将其按段落拆分。

\n\n

在文本区域中：

\n\n

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

\n\n

在非形式元素中：

\n\n

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

\n