truncate.jsを使用して複数行のhtmlテキストを切り捨て

Question

素晴らしいhtml切り捨てライブラリtruncate.jsが見つかりました。私のニーズの約99％を処理しています。しかし、私は直面している厄介な問題が1つあります。私は、このライブラリがテキストのブロックに対して達成するために管理している一連の投稿のために、特定の数の行の最後に 'Show more'を必要とする要件があります。しかし、複数行のテキスト表示moreは適切に配置されていません。

私はこの問題を示すためにplunkerを作成しました。私が望むのは、同じページに座っているテキストのブロックと同じように、同じ位置に複数行のテキストを表示することです。

私の最初の試みは、私は複数行のテキストのために欲しいものを私に与えますが、それは、その後の元の機能を壊すtruncateNestedNodeEnd機能

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); 

      } 
     }` 

中）（PREVを追加しましたプランナーに示されているテキストのブロック。どのようにしてこの機能を2つのケースで機能させることができますか。私はまだ、この2つの投稿が同じページに載っているときに、黄色の部分に表示するほうを表示したいと思います。

Answer 1

問題は、再帰的に異なるコンテナでの$ clipNodeを置き、打ち切りフラグが真でない場合は、それらを削除しtruncate.jsです。あなたのアプローチの問題は、リストされた項目の場合は真であったが、前の項目がない場合は真ではない要素の前のノードに追加していたことです（テキストブロックの場合のように）。そのため、あなたのアプローチでは、テキストブロックに何も挿入していないのです。私は次のようにコードを変更し、関数の最後に別の追加ステートメントを追加して、$ clipNodeを追加し終わったら、その$ clipNodeコンテナを前の要素に移動します。

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); 
 
}

そして、問題はまた、あなたがに無用JSを使用しないのはなぜPlunker

Answer 2

私はあなたの目的を理解しているかどうかはわかりませんが、「@Abide Masaraure」テキストを使用して繰り返されたスパンタグの間隔をより一定にしようとしていると思います。

もしそうなら、私は、Chromeの検査機能または別のブラウザの同様の機能を使用して生成されたHTMLを調べることをお勧めします。

奇数の間隔があるため非改行空白文字で発生するようです（& NBSP;）は、ちょうど最後のspanタグの前に挿入されています。

ここに私があなたのプランナーの例からこれを示すために引っ張ったいくつかのイメージがあります。

何らかの形でスパンタグは何もせずに、改行なしのスペース文字で生成されています。

あなたの切り捨てロジックは何とか空の文字列またはスペースが改行なしスペース文字でこれらのspanタグに変換することを可能にするだろうか？それがディスプレイの問題の根本的な原因かもしれません。私はこれが役立つことを願っています

Answer 3

すでに短いテキストブロックを短縮するには、切り詰めをしようとしています。注釈行は改行するのに十分な長さではないので、改行を壊し、改行に達したときに切り詰める内容はありません。短い行を強制するdivを削除すると、コンテンツは行の最後に到達し、期待通りに折り返します。あなたの2番目の段落の場合のように、一つだけの要素がある場合 あなたが前の要素の前に「showmore」を追加し、それがすべてでは動作しません。 @ JohnHで言及された余分なスペースは、フォーマットを醜いものにしますが、ブレークを引き起こしていません。