Get each line of text element

Question

Is there a way in Vanilla JS to get each line of a text element when the page loads or when the window is resized?

Lets say for the element <h2>This is a beautiful example text</h2>.

On mobile (with less space it breaks into several lines) would be displayed as:

This is a

beautiful

example text

and i would like to get an array like:

["This is a", "beautiful", "example text"]

if we resize the window, maybe on desktop, than the text would have a little bit more space so it needs to break in to less lines, maybe:

This is a beautiful

example text

and then i would like to get:

["This is a beautiful", "example text"]

i have tried something like:

let text = document.querySelector('.text').textContent;
let lines = text.split(/\r|\r\n|\n/);

but i always end up getting the whole string together like ["This is a beautiful text"].

I am trying to do this, because i need to style each line independently (yeap, crazy client wishes!), i cannot change the html and it needs to work when i resize the window. So i think i need to do it with JS, and somehow see how CSS is affecting the text and breaking it into several lines...

so, to clarify, what i am trying to get with JS with the text of each line, when the text breaks because of the container getting smaller. So the Element and the text are the same, but due to less space it breaks into different amount of lines.

Any ideas?

** === UPDATE === ** I can get the number of lines using .getClientRects(). But what i am trying to do is get the text of each of the lines of the element

Answer 1

I've put together a mock up JS solution.

Overview:

• Get an array of words
• Append each word one at a time to a hidden element with the same font-sizing styles as the title
• Check if the element is larger than the title, if so, add the current line (before we added the last word to it) to an array

function calcLines() {
  // Build an array of each word used in the original title
  var allWords = document.getElementById("title").innerText.match(/\S+/g) || [];
  // The array we will fill with each line
  var lines = [];
  // The current line we are working on building
  var currentLine = "";

  // Work through the words until we're filling the correct amount of space
  for (var i = 0; i < allWords.length; i++) {
    // Build a new line and check if it is now too large for the container
    var newLine = currentLine + allWords[i] + " ";
    document.getElementById("fontSizeTester").innerText = newLine;
    if (
      document.getElementById("fontSizeTester").clientWidth >
      document.getElementById("title").clientWidth
    ) {
      // If the line is now larger, use the previous line (without the last added word) and reset the current line to just the last word
      lines.push(currentLine.trim());
      currentLine = allWords[i] + " ";
    } else {
      // If it's not long enough yet, just keep adding words
      currentLine = newLine;
    }
  }
  // Push any unfinshed final line to the array
  lines.push(currentLine.trim());
  
  console.log(lines);
}

// Run on load and on resize
calcLines();
window.addEventListener("resize", calcLines);

h2 {
  font-size: 30px;
  font-weight: normal;
  font-family: arial;
}

#fontSizeTester {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
}

<h2 id="title">This is a beautiful example text This is a beautiful example text This is a beautiful example text This is a beautiful example text This is a beautiful example text This is a beautiful example text This is a beautiful example text This is a beautiful example text This is a beautiful example text</h2>
<h2 id="fontSizeTester"></h2>

Answer 2

You can create a flex container in your body , and attach your array there. As result all items in your array will be filling the width of the screen.

https://codepen.io/Vlasenko/pen/vYLwMvE - check it here

const cont = document.querySelector(".container");
      const arr = ["This is a", "beautiful", "example text"];
      arr.forEach((item) => {
        const div = document.createElement("div");
        div.className = "item";
        div.innerText = item;
        cont.appendChild(div);
      });

      <style>
          .container {
            display: flex;
            flex-wrap: wrap;
          }
          .item {
            padding-right: 5px;
          }
        </style>
    <body>
        <div class="container"></div>
    </body>