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** <div> 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... </div> 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

You can query the DOM for the DIV's scrollHeight vs. its clientHeight. The clientHeight is the actually rendered height of the DIV, while the scrollHeight represents the contents height. So, by comparing the two and checking if the scrollHeight is larger, you can determine if the DIV is overflowing and use that as your cue.