Javascript: How can I count the number of lines of a text element inside a DOM element such as <li>

Issue

My question is, if there is a way in javascript to count the number of lines of an element such as :

<li classname="link-link"> Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown </li>

With no line length being set. This example could be in 2,3 or 4 lines. There are similar questions to this, but none gave the answer I was looking for.

Solution

You could get the height and line height then round that to get your answer.

HTML:

<li id="link-link"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>

JS (Jquery):

var height = $("#link-link").height()
var fontSize = $("#link-link").css('font-size');
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);

console.log(Math.ceil(height / lineHeight));

Pure JS:

var el = document.getElementById('link-link');

var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 

var lineHeight = Math.floor(fontSize * 1.5);
var height = el.clientHeight;

console.log(Math.ceil(height / lineHeight));

JSFiddle w JQuery | JSFiddle with out JQuery

Answered By - Chris