So schneiden Sie komplexe HTML durch Zeilen

Question

Ich versuche, komplexe HTML durch Zeilen zu kürzen, um in der Lage sein, eine Show mehr Link anzuzeigen, nachdem eine bestimmte Anzahl von Zeilen erreicht wurde. Ich fand eine große Bibliothek trunk8.js, die nach Zeilen abgeschnitten..aber wenn es kurz, wenn es um das Abschneiden von komplexen HTML kommt. Für meinen speziellen Fall habe ich die truncate-Funktion überschrieben, so dass ich komplex mit der Verwendung einer anderen truncation-Funktion umgehen kann, die komplexe HTML-Tags intakt lässt. Verkürzungs mit html große Arbeit, aber ich bin fest, wie genau zu berechnen, wo Show zu mehr mehr, bezogen auf die Anzahl der Zeilen

Wie im Bild zu sehen oben Ich versuche zu 7 Zeilen zu kürzen Wenn jedoch die Benutzereingabe Leerzeichen in Gelb enthält, sind meine Berechnungen falsch, da ich die Leerräume nicht berücksichtige. Mein erster Gedanke war, dass ich, wenn ich die Länge der gelben Felder für jede Zeile berechnen und in Zeichen umwandeln kann, diesen Offset zu der maximalen Anzahl von Zeichen hinzufügen kann, dann kann ich wissen, wo ungefähr die Show hingelegt werden soll mehr Link. Ist dies der beste Ansatz für dieses Problem und wenn nicht, irgendwelche Vorschläge, um mein Leben leichter zu machen.

Dies ist ein plunker von dem, was ich bisher versucht habe, und ich bin in meiner truncateHTML() -Funktion in der trunk8.js stecken, wo ich nur jetzt auf der maximalen Länge der Zeichenfolge abgeschnitten wird.

Answer 1

Eureka !! Nach ein paar Google-Suchen und schweren Debugging-Sprints stolperte ich über eine Bibliothek truncate.js, die ich die truncatedNestednode() -Funktion für meine Bedürfnisse angepasst habe.

element.appendChild(child); 
     /** Customized--here **/ 
     var clonedNode = {}; 
     if ($clipNode.length) { 
      if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
       // Certain elements like <li> should not be appended to. 
       $element.after($clipNode); 
      } 
      else 
      { //Removed the commented line to put showmore next to the last line of text 
       $element.prev().append($clipNode); 
       //$element.append($clipNode); 

       } 
     } 

Falls jemand dieses Problem in der Vergangenheit konfrontiert, ich habe meinen überarbeiteter Plunker here

geschrieben