How to Count Text Lines Inside an Dom Element Can I

How can I count text lines inside an DOM element? Can I?

I am convinced that it is impossible now. It was, though.

IE7’s implementation of getClientRects did exactly what I want. Open this page in IE8, try refreshing it varying window width, and see how number of lines in the first element changes accordingly. Here’s the key lines of the javascript from that page:

var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));

Unfortunately for me, Firefox always returns one client rectangle per element, and IE8 does the same now. (Martin Honnen’s page works today because IE renders it in IE compat view; press F12 in IE8 to play with different modes.)

This is sad. It looks like once again Firefox’s literal but worthless implementation of the spec won over Microsoft’s useful one. Or do I miss a situation where new getClientRects may help a developer?

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

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

How to count number of lines in javascript html string variable

If interpret Question correctly , try creating jQuery object from html_string , using .filter() to select p elements , .length property of returned jQuery object for number of p elements in original string

$(html_string).filter("p").length

var html_string = '<p class="MsoListParagraph" style="margin-left:28.5pt;mso-add-space:auto;text-indent:-28.5pt;mso-list:l0 level2 lfo1;tab-stops:list 28.5pt"><!--[if !supportLists]--><b><span lang="EN-US">1.1<span style="font-weight: normal; font-stretch: normal; font-size: 7pt; line-height:normal; font-family: Times New Roman;"></span></span></b><!--[endif]--><b><span lang="EN-US">Purpose of the Document<o:p></o:p></span></b></p><p class="MsoNormal" style="margin-left:28.5pt;tab-stops:80.25pt"><span lang="EN-US">This document helps to understand the design aspects of the ASSMail web based project. This document details the technical specification for the project.</span></p>';
var html = $(html_string);
html.appendTo("body");
console.log(html.filter("p").length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

How to return number of lines for a p element?

a simple calculation of element height divided by line height can give you the number of lines rendered on actual display.

// 1. get height of element.
// 2. get line height.
// 3. divide 1 by 2 to figure out computed lines.

function countLines(element) {

    let x = $(element).prop('scrollHeight');
    let y = $(element).css('lineHeight');
    y = parseInt(y);

    return x/y;
}

How i get out how many lines my paragraph has with JavaScript?

If I understand your question correctly, you want to know how many lines a piece of text will occupy. It isn't enough to count the line breaks because some text may wrap due to its length.

In that case, you should have a look at the link that @Omar included: How can I count text lines inside an DOM element? Can I?

You'll need two bits of information to count the number of lines which includes the font size and the container width that the PDF will ultimately use.

Note that this will only give you a rough approximation of how many lines will be used because text layout can vary from application to application. i.e. text may render differently based on how the PDF is generated. It should hopefully work well enough.

Also note that if the text comes with line breaks (\n) already included, you may want to add the following style to the container element: white-space: pre-wrap;