Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>测试一下</title>
  </head>
  <body>
    <div class="box" id="box">
      <p id="p" style="line-height: 20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        ⑥每一穗花都是上面的盛开、下面的待放。颜色便上浅下深，好像那紫色沉淀下来了，沉淀在最嫩最小的花苞里。每一朵盛开的花就像是一个小小的张满了的帆，帆下带着尖底的舱。船舱鼓鼓的；又像一个忍俊不禁的笑容，就要绽开似的。那里装的是什么仙露琼浆？我凑上去，想摘一朵。
      </p>
    </div>
    <script>
      const pElement = document.querySelector('#p');
      const lineHeight = parseFloat(getComputedStyle(pElement).lineHeight);
​
      const pHeight = pElement.clientHeight;
      const numLines = Math.floor(pHeight / lineHeight);
​
      console.log('numLines', numLines);
      let singleLineContent = '';
​
      // 获取每一行的文本内容
      for (let i = 0; i <= numLines; i++) {
        const rect = pElement.getBoundingClientRect();
        const range = document.createRange();
        const startOffset = getCharacterOffsetAtLine(pElement, i);
        const endOffset = getCharacterOffsetAtLine(pElement, i + 1);
​
        range.setStart(pElement.firstChild, startOffset);
        range.setEnd(pElement.firstChild, endOffset);
        singleLineContent += range.toString();
        console.log(`第${i}行内容：`, range.toString());
        // console.log(singleLineContent);
      }
​
      // 根据行数获取在文本节点中的字符偏移量
      function getCharacterOffsetAtLine(element, lineIndex) {
        const range = document.createRange();
        range.selectNodeContents(element);
​
        let currentLine = 0;
        for (let i = 0; i < element.textContent.length; i++) {
          range.setStart(element.firstChild, i);
          range.setEnd(element.firstChild, i + 1);
          const rect = range.getBoundingClientRect();
          if (rect.bottom > currentLine * lineHeight) {
            currentLine++;
            if (currentLine > lineIndex) {
              return i;
            }
          }
        }
​
        return element.textContent.length;
      }
    </script>
  </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers