Найдите количество строк в 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 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 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)));

Но не добились успеха, ребята, помогите мне.

Ответ 1

Вы можете использовать плагин ThreeDots для jQuery: 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

проблема с вашим кодом заключается в том, что если вы не укажете высоту строки, значение по умолчанию для высоты строки normal.

Попробуйте следующее:

CSS

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

JQuery

$(document).ready(function() {
    var divheight = $("#startegy-sections-targeting-exclude").height(); 
    var lineheight = $("#startegy-sections-targeting-exclude").css('line-height').replace("px","");
    alert(Math.round(divheight/parseInt(lineheight)));
});

DEMO

Ответ 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");