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-doubl         


        
                      

              相关标签:
       
      

Answer 1

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>

Answer 2

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");

Answer 3

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 });