找到div中的行数 [英] Find the number of lines in a div

问题描述

我希望显示'查看所有'类型的链接，只有当div中的行数达到4行时。 HTML

 < div> 
 3PAS-Pub-IO-doubleclick.net-LI，ATOM_DFP_Pub_LI，AUG12_Zynga.com_MafiaWars2_0.10 $ _CPM，
 ATOM_Macro_Jivox测试，9月11日头肩创新 - 不要比尔，123Greetings  -  IN不支付_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> 
  

用jquery substring概念试过，但没有运气，

我试过像

1. 查找div高度

find line height


2. div height / line height =没有行

这是代码：

  var divheight = $（＃startegy-sections-靶向 - 排除）高度（）; 
 var lineheight = $（＃startegy-sections-targeting-exclude）.css（'line-height'）; 
 console.log（Math.round（divheight / parseInt（lineheight）））; 
  

但是没有成功，您能帮我解决吗？

解决方案

您可以使用ThreeDots插件用于jQuery： http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

在< div> 上调用 ThreeDots（）时，将 max_rows 到 4 。只要看看该页面上的例子，您还可以设置自定义的阅读更多链接。但请注意，您必须将文本包装到额外的< span> 中，如下所示：

 < div class =text_here> 
< span class =ellipsis_text> 
您的文本
< / span> 
< / div> 
  

... jQuery代码行然后是：

  $（'。text_here'）。ThreeDots（{max_rows：4}）; 
  

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

解决方案

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

这篇关于找到div中的行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！