Find the number of lines in a div

问题

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

find div height
find line height
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

回答1:

You can use the ThreeDots plugin for jQuery: http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

When calling ThreeDots() on your <div>, set max_rows to 4. Just look at the examples on that page, you can also set your custom "read more" link. But beware that you have to wrap your text into an extra <span>, like so:

<div class="text_here">
    <span class="ellipsis_text">
        your text
    </span>
</div>

... the jQuery code line would then be:

$('.text_here').ThreeDots({ max_rows:4 });

回答2:

The problem with your code is that if you don't specify a line-height, the line-height default value is normal.

$(function() {
  var divheight = $("#startegy-sections-targeting-exclude").height();
  var lineheight = parseInt($("#startegy-sections-targeting-exclude").css('line-height'), 10);
  console.log("Number of lines:", Math.round(divheight / lineheight));
});

#startegy-sections-targeting-exclude {
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="startegy-sections-targeting-exclude">
  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>

回答3:

you should not use $("#startegy-sections-targeting-exclude").css('line-height'); if you haven't specified a line-height. in javascript you can use this :

var element = document.getElementById('startegy-sections-targeting-exclude');
var lineheight = document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");

来源：https://stackoverflow.com/questions/14375971/find-the-number-of-lines-in-a-div

标签

jquery

html

logic