web-dev-qa-db-ja.com

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の部分文字列の概念を試してみましたが、うまくいきませんでした。

私は好きにした

  1. divの高さを見つける

  2. 行の高さを見つける

  3. divの高さ/行の高さ=行数

これはコードです：

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

しかし、成功しません、皆さん、私を助けてくれませんか

jqueryhtmllogic
14
Manojkumar

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
saschoar

コードの問題は、行の高さを指定しない場合、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>
10
Bruno

行の高さを指定していない場合は、$("#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");
1
Fi Ras