我想显示'查看全部'类型的链接,仅当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 substring概念,但没有运气,
我试过
找到div高度
查找行高
div height / line height = no of lines
这是代码:
var divheight = $("#startegy-sections-targeting-exclude").height();
var lineheight = $("#startegy-sections-targeting-exclude").css('line-height');
console.log(Math.round(divheight/parseInt(lineheight)));
但是没有成功,你们能帮帮我吗
答案 0 :(得分:10)
您的代码存在的问题是,如果您未指定行高,则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>
答案 1 :(得分:3)
您可以使用jQuery的ThreeDots插件:http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/
在ThreeDots()
上致电<div>
时,请将max_rows
设为4
。只需查看该页面上的示例,您还可以设置自定义的“阅读更多”链接。但请注意,您必须将文本换成额外的<span>
,如下所示:
<div class="text_here">
<span class="ellipsis_text">
your text
</span>
</div>
... jQuery代码行将是:
$('.text_here').ThreeDots({ max_rows:4 });
答案 2 :(得分:1)
如果您没有指定行高,则不应使用$("#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");