# Get lines of text from an HTML element

DevFeed: [Get lines of text from an HTML element](<https://devfeed.tech/articles/get-lines-of-text-from-an-html-element-37274.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/get-lines-of-text-from-html-element/>)

Author: Stanko

Published: 2022-12-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Code](<https://devfeed.tech/topics/code.md>), [function](<https://devfeed.tech/topics/function.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [code](<https://devfeed.tech/tags/code.md>), [elements](<https://devfeed.tech/tags/elements.md>), [function](<https://devfeed.tech/tags/function.md>), [html](<https://devfeed.tech/tags/html.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [script](<https://devfeed.tech/tags/script.md>)

## AI overview

A JavaScript approach for finding text lines in an HTML element by wrapping each word in an inline span and comparing successive top offsets with getBoundingClientRect.

## Source excerpt

I was tasked with getting lines of text from an element many times. Usually it was to truncate the textBefore line-clamp was a thing or to animate the text line by line. It sounds easy, but I have encountered many edge cases in practice. After trying out multiple approaches, I finally have a solution I'm satisfied with, although it has some limitations. Let's start with a demo which displays one of my favorite Frank Zappa quotes: Information is not knowledge. Knowledge is not wisdom. Wisdom is not truth. Truth is not beauty. Beauty is not love. Love is not music. Music is THE BEST. To restart the animation, resize the element using a handle on the right. The same code is also available on CodePen for you to play with. Implementation # The idea is to go word by word and check if the word has fallen into the next line. To determine if a word has fallen, we need to compare the word's top offset with the previous word's top offset. When it changes, it means a new line has started. We can't get top offset from text, but we can get it from HTML elements. Therefore, we need to wrap each word in a separate <span> element first. Then we can loop through all the spans and use getBoundingClientRect to get the top offset value. When the value changes compared to the previous word, it means that the current word fell into a new line. function getTextLines(element) { // Get plain text from the element const text = element.innerText // Replace all whitespace (newlines, tabs and space) with a single space .replace(/\s+/gm, " ") // Remove leading and trailing whitespace .trim(); // Split text into words const words = text.split(" "); // Wrap all words in spans const spans = words.map((word) => { // Adding inline-block to make sure single word doesn't break into multiple lines // For example: short-term, full-scale return `<span style="display: inline-block;">${word}</span>`; }); // Replace initial element content with our spans. // It is a simple way to preserve the original styling