使用JavaScript查找渲染的换行符 [英] Find rendered line breaks with javascript

问题描述

我有这种情况:

div { width: 200px }

<div> example example example example example</div>

当填充<div>的整个宽度时，文本会自动跳至下一行.

Text jumps to next line automatically when filling the full width of the <div>.

使用javascript，如何在上一行中显示渲染的内容?

Using javascript how can I have the rendered content in the above line?

注释:字符串中没有换行符

以上代码段的预期结果:

"example example example"与第1行相对应，"example example"与第2行相对应

"example example example" corresponding with row 1 and "example example" corresponding with row 2

推荐答案

您可以使用范围API 及其方便的

You can make use of the Range API and its handy getBoundingClientRect() method to determine which character marks the seizure in a TextNode.

请注意，每次更改窗口大小/更改布局时，显然都需要重新计算.

Note that this obviously needs to be recalculated every time the window is resized / something changes the layout.

function getLineBreaks(node) {
  // we only deal with TextNodes
  if(!node || !node.parentNode || node.nodeType !== 3)
    return [];
  // our Range object form which we'll get the characters positions
  const range = document.createRange();
  // here we'll store all our lines
  const lines = [];
  // begin at the first char
  range.setStart(node, 0);
  // initial position
  let prevBottom = range.getBoundingClientRect().bottom;
  let str = node.textContent;
  let current = 1; // we already got index 0
  let lastFound = 0;
  let bottom = 0;
  // iterate over all characters
  while(current <= str.length) {
    // move our cursor
    range.setStart(node, current);
    if(current < str.length -1)
     range.setEnd(node, current+1);
    bottom = range.getBoundingClientRect().bottom;
    if(bottom > prevBottom) { // line break
      lines.push(
        str.substr(lastFound , current - lastFound) // text content
      );
      prevBottom = bottom;
      lastFound = current;
    }
    current++;
  }
  // push the last line
  lines.push(str.substr(lastFound));

  return lines;
}

console.log(getLineBreaks(document.querySelector('.test').childNodes[0]));

div.test {
  width: 50px;
  margin-bottom: 100px;
  word-break: break-all;
}

body>.as-console-wrapper{max-height:100px}

<div class="test">This is some quite long content that will wrap in multiple lines</div>

如果需要每行的相对y位置:

And if you need the relative y position of each lines:

function getLineBreaks(node) {
  // we only deal with TextNodes
  if(!node || !node.parentNode || node.nodeType !== 3)
    return [];
  // our Range object form which we'll get the characters positions
  const range = document.createRange();
  // here we'll store all our lines
  const lines = [];
  // begin at the first character
  range.setStart(node, 0);
  // get the position of the parent node so we can have relative positions later
  let contTop = node.parentNode.getBoundingClientRect().top;
  // initial position
  let prevBottom = range.getBoundingClientRect().bottom;
  let str = node.textContent;
  let current = 1; // we already got index 0
  let lastFound = 0;
  let bottom = 0;
  // iterate over all characters
  while(current <= str.length) {
    // move our cursor
    range.setStart(node, current);
    if(current < str.length - 1)
      range.setEnd(node, current+1); // wrap it (for Chrome...)
    bottom = range.getBoundingClientRect().bottom;
    if(bottom > prevBottom) { // line break
      lines.push({
        y: prevBottom - (contTop || 0), // relative bottom
        text: str.substr(lastFound , current - lastFound) // text content
      });
      prevBottom = bottom;
      lastFound = current;
    }
    current++;
  }
  // push the last line
  lines.push({
    y: bottom - (contTop || 0),
    text: str.substr(lastFound)
  });

  return lines;
}

console.log(getLineBreaks(document.querySelector('.test').childNodes[0]));

div.test {
  width: 50px;
  margin-bottom: 100px;
}

body>.as-console-wrapper{max-height:100px}

<div class="test">This is some quite long content that will wrap in multiple lines</div>

对于那些需要它来处理元素而不是单个textNode的人来说，这是一个快速制作小提琴可能会失败，但在大多数情况下应该可以使用.

For the ones who need it to work over elements instead of a single textNode, here is a quickly made fiddle which may fail but which should work in most cases.

这篇关于使用JavaScript查找渲染的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！