0

I want to dynamically calculate number of lines of text inside HTML element (fyi. I want to use show more/less solution for long texts not just character count). Let's have this generated html code (the number of lines may vary depending on the screens's resolution)

<span>
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam 
    vestibulum morbi blandit cursus risus at ultrices. Quisque non tellus
    orci ac auctor augue mauris augue neque. Sed odio morbi quis commodo
    odio. Aliquet"
</span>

Render:

enter image description here

I have tried this solution, but el.style.lineHeight is not set.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
tprieboj
  • 1,680
  • 6
  • 31
  • 54
  • Try `getComputedStyle(el).lineHeight` – Phil Oct 07 '19 at 21:59
  • 1
    Consider using [Element.getClientRects()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects) like this: `const linesNumber = document.getElementById('your_span_id').getClientRects().length;`. It will work perfectly fine, but only for [inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) such as ``, `

    `, ``, etc.

     – Kirill Simonov Oct 07 '19 at 23:07

0 Answers0