truncate.js'yi kullanarak çok satırlı html metnini kesme

Question

Gereksinimlerimin yaklaşık% 99'unu işleyen harika bir html kesme kitaplığı, truncate.js buldum. Ama karşı karşıya olduğum bir nagging sorunum var. Bu kitaplığın bir metin bloğu için başardığı bir dizi yayın için belirli bir sayıda satırın sonuna yerleştirilen 'Daha fazlasını göster' gerektiren bir gereksinim var ... ama çok satırlı metin şovu söz konusu olduğunda daha doğru konumlandırılmamış.

Sorunu göstermek için plunker yaptık. Tek istediğim, çok satırlı metin için aynı konumda, aynı sayfada oturan bir metin bloğu için göründüğü gibi aynı konumu gösterebilmektir.

İlk deneyin fonksiyonunu ben satırlı metin için istediğim şeyi verir

if ($clipNode.length) { 
     if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
      // Certain elements like <li> should not be appended to. 
      $element.after($clipNode); 
     } 
     else 
      { 
      //edited this line to add prev() 
      //$element.append($clipNode) 
      $element.prev().append($clipNode); 

      } 
     }` 

truncateNestedNodeEnd içinde prev() eklemek, ama daha sonra orijinal işlevselliği kırar plunker'da gösterildiği gibi metin bloğu. Bu işlevi iki durum için nasıl çalıştırabilirim. Yine de, bu iki yazı aynı sayfada otururken, sarı kısımda görünecek daha fazlasını göster istiyorum.

Answer 1

Sorun şu ki, truncate.js $ clipNode'u farklı kapsayıcılara yinelemeli olarak yerleştiriyor ve kesme bayrağı doğru değilse bunları kaldırıyor. Yaklaşımınız ile ilgili problem, önceden listelenen öğeler için doğru olan, ancak önceki bir öğenin olmadığı durumlarda (metin bloğunda olduğu gibi) doğru olmayan öğenin bir önceki düğümüne ekliyor olmanızdır. Bu yüzden yaklaşımınızda metin bloğunda hiçbir şey eklemiyordu.Kodu aşağıdaki gibi değiştirdim ve fonksiyonun sonunda başka bir ekleme ifadesi ekledim, böylece bir kere $ clipNode ekledikten sonra, bu $ clipNode konteynerini varsa önceki öğeye taşır.

if ($clipNode.length) { 
 
    if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
 
    // Certain elements like <li> should not be appended to. 
 
    $element.after($clipNode); 
 
    } else { 
 
    //edited this line to add prev() 
 
    //$element.append($clipNode) 
 
    $element.append($clipNode); 
 

 
    } 
 
} 
 

 
if ($rootNode.height() > options.maxHeight) { 
 
    if (child.nodeType === 3) { // text node 
 
    truncated = truncateTextContent($child, $rootNode, 
 
     $clipNode, options); 
 
    } else { 
 

 
    truncated = truncateNestedNode($child, $rootNode, $clipNode, 
 
     options); 
 
    } 
 
} 
 

 
if (!truncated && $clipNode.length) { 
 
    $clipNode.remove(); 
 
} else { 
 
    $element.prev().append($clipNode); 
 
}

Ve sorun

enter image description here

çözmüş gibiydi

Eğer bir işe yaramaz js kullanırım Neden ayrıca Plunker

Answer 2

Hedefinizi anladığımdan emin değilim, ancak "@Abide Masaraure" metniyle tekrarlanan aralık etiketleri için aralığın daha tutarlı olmasını sağlamaya çalıştığınızı düşünüyorum.

Eğer öyleyse, oluşturulan HTML'yi Chrome'un Inspect özelliğini veya benzer bir işlevi başka bir tarayıcıdan kullanarak incelemeyi öneririm. Son aralık etiketinden hemen önce eklenen kırılmayan boşluk karakterleri (& nbsp;) nedeniyle tek aralık oluşuyor gibi görünüyor.

İşte bunu göstermek için plunker örneğinizden çektiğim bazı resimler.

nasılsa etiketlerinde hiçbir şey ama bölünemez boşluk karakterleri ile üretiliyor span.

sizin kesme mantığı nasılsa boş dizeler veya boşluk bölünemez boşluk karakterleri ile bu yayılma etiketleri dönüştürülebilir verebilir? Bu, görüntü sorunlarınızın temel nedeni olabilir. Umarım bu yardımcı olur.

Answer 3

Zaten kısa bir metin bloğunu kısaltmak için kısaltmaya çalışıyorsunuz. Bahsedilen satır kırılacak kadar uzun değil, bu yüzden satırsonu kırılıyor ve yeni satıra ulaştığında kırpılacak içerik yok. Kısa çizgileri zorlayan div'ları kaldırırsanız, içerik satırın sonuna ulaşır ve beklediğiniz gibi sarar. Bir önceki öğeden önce "showmore" eklediğinizde, ikinci paragrafınızda olduğu gibi yalnızca bir öğe varsa, hiç çalışmaz. @JohnH tarafından belirtilen ekstra boşluklar biçimlendirmeyi çirkin hale getiriyor ancak aralığa neden olmaz.