查找 div 中的行数

Posted 2023-05-08

【中文标题】查找 div 中的行数

【英文标题】：Find the number of lines in a div

【发布时间】：2012-12-31 19:24:20

【问题描述】：

我想显示“查看全部”类型的链接，只有当 div 中的行达到 4 行时。

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>

尝试使用 jquery 子字符串概念，但没有运气，

我试过了

查找 div 高度

查找行高

div 高度 / 行高 = 行数

这是代码：

var divheight = $("#startegy-sections-targeting-exclude").height();
var lineheight = $("#startegy-sections-targeting-exclude").css('line-height');
console.log(Math.round(divheight/parseInt(lineheight))); 

但是没有成功，你们能不能帮帮我

【问题讨论】：

为什么不起作用？你的代码呢？

我不认为有一个完全可靠的方法，但你的概念听起来不错。发布您的代码，我们可以为您指明正确的方向。

抱歉耽搁了，var divheight = $("#startegy-sections-targeting-exclude").height(); var lineheight = $("#startegy-sections-targeting-exclude").css('line-height'); console.log(Math.round(divheight/parseInt(lineheight)));

@ManojKumar css('line-height') 不返回包含“px/em”的字符串吗？

CSS 属性line-height 通常不是数值，而是设置为normal、large 等。因此，您不会得到答案。

【参考方案1】：

您的代码的问题在于，如果您不指定行高，则line-height 默认值为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>

【参考方案2】：

您可以使用 jQuery 的 ThreeDots 插件：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">
        your text
    </span>
</div>

... jQuery 代码行将是：

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

【参考方案3】：

如果您没有指定行高，则不应使用$("#startegy-sections-targeting-exclude").css('line-height');。在javascript中你可以使用这个：

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