Find the number of lines in a div?

Question

I want to show 'View All' kind of link, only when the lines in the div has reached 4 lines. **HTML**

3PAS-Pub-IO-doubleclick.net-LI, ATOM_DFP_Pub_LI, AUG12_Zynga.com_MafiaWars2_0.10$_CPM, ATOM_Macro_Jivox Testing, Sep 11 Head and Shoulder Innovation - Do Not Bill, 123Greetings - IN Do Not Pay_Second, July 11_Affinity.com_Fiat Linea_CPL 55, 3PAS-Pub-IO-atdmt.com-LI, 2_Affinity_RealEstate_CPC_2.8_INR_2nd, AUG12_Zynga.com_treasureIsle_0.10$_CPM, AUG12_Zynga.com_theville_0.10$_CPM, 123Greetings - IN Do Not Pay_NonIndia, AUG12_Zynga.com_RubyBlast_0.10$_CPM, 12_Affinity_Education_CPC_2.8_INR_1st, 728x90_Original, 300x250_TagModified, Dec11_ WhyteFort_CPL_INR 45, AUG12_Zynga.com_PetsVille_0.10$_CPM, 123Greetings - IN Do Not Pay_First, AUG12_Zynga.com_FishVille_0.10$_CPM, 3PAS-Pub-IO-adfac.net-LI, 3PAS-Pub-IO-bs.serving-sys.com-LI1, 3PAS-test-pub-IO-li, 160x600_Noscr...

Tried with jquery substring concept, but no luck, I tried like 1. find div height 2. find line height 3. div height / line height = no of lines This is the code: var divheight = $("#startegy-sections-targeting-exclude").height(); var lineheight = $("#startegy-sections-targeting-exclude").css('line-height'); console.log(Math.round(divheight/parseInt(lineheight))); But have no success, Can you guys, help me out

Answer 1

One approach could be to create a hidden div with the same content as the target div, set its height to a fixed value (e.g. 1em), and check its scrollHeight property to see how many lines the content takes up. Here's an example code snippet:

var lineHeight = parseInt($('#target-div').css('line-height')); // get line height in pixels

var lineHeightEm = lineHeight / parseFloat($('body').css('font-size')); // convert to em units

var hiddenDiv = $('<div>').css({

 position: 'absolute',

 top: '-9999px',

 left: '-9999px',

 visibility: 'hidden',

 width: $('#target-div').width(),

 'font-size': $('#target-div').css('font-size'),

 'line-height': lineHeightEm + 'em'

}).html($('#target-div').html()).appendTo('body');

var numLines = Math.round(hiddenDiv.get(0).scrollHeight / lineHeight);

console.log(numLines); // output the number of lines

In this code, we first get the line height of the target div in pixels, convert it to em units, and create a hidden div with the same font size and line height. We then copy the HTML content of the target div to the hidden div and append it to the body. Finally, we check the hidden div's scrollHeight property and divide it by the line height to get the number of lines.