Cắt bớt văn bản html nhiều dòng bằng cách sử dụng truncate.js

Question

Tôi đã tìm thấy một thư viện cắt ngắn html tuyệt vời, truncate.js, xử lý khoảng 99% nhu cầu của tôi. Nhưng tôi có một vấn đề dai dẳng tôi đang phải đối mặt. Tôi có một yêu cầu yêu cầu 'Hiển thị thêm' được đặt vào cuối một số dòng cụ thể cho một loạt bài đăng ... mà thư viện này quản lý để đạt được cho một khối văn bản .. nhưng khi nói đến chương trình văn bản nhiều dòng nhiều hơn không được định vị đúng cách.

Tôi đã thực hiện một plunker để chứng minh sự cố. Tất cả những gì tôi muốn là có thể hiển thị nhiều hơn trong cùng một vị trí cho văn bản nhiều dòng giống như cách nó xuất hiện cho một khối văn bản đang ngồi trên cùng một trang.

thử đầu tiên của tôi là để thêm trước() trong truncateNestedNodeEnd chức năng

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

      } 
     }` 

nào mang lại cho tôi những gì tôi muốn cho văn bản nhiều dòng, nhưng sau đó nó phá vỡ các chức năng ban đầu cho một khối văn bản như được hiển thị trong plunker. Làm thế nào tôi có thể làm cho chức năng này làm việc cho hai trường hợp. Tôi vẫn muốn Hiển thị nhiều hơn để xuất hiện trên phần màu vàng, khi hai bài đăng này đang ngồi trên cùng một trang.

Answer 1

Vấn đề là truncate.js đệ quy đặt $ clipNode trong các vùng chứa khác nhau và loại bỏ chúng nếu cờ cắt ngắn không đúng. Vấn đề với cách tiếp cận của bạn là bạn đã gắn vào nút trước của phần tử đã đúng trong trường hợp các mục được liệt kê nhưng không đúng trong trường hợp không có mục trước (như trong trường hợp khối văn bản). Đó là lý do tại sao trong cách tiếp cận của bạn nó không được chèn bất cứ điều gì trong khối văn bản.Tôi đã thay đổi mã như sau và thêm một tuyên bố chắp thêm ở cuối hàm để sau khi nó kết thúc thêm $ clipNode, Sau đó nó di chuyển $ clipNode chứa thành phần trước đó nếu có.

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

Và vấn đề dường như đã giải quyết

enter image description here

cũng Vui lòng tham khảo mã cập nhật trong Plunker

Answer 2

Tôi không chắc chắn rằng tôi hiểu mục tiêu của bạn, nhưng tôi nghĩ rằng bạn đang cố gắng để có được khoảng cách phù hợp hơn cho các thẻ khoảng lặp lại với văn bản "@Abide Masaraure".

Nếu đúng như vậy, tôi khuyên bạn nên kiểm tra HTML được tạo bằng tính năng Kiểm tra của Chrome hoặc chức năng tương tự từ trình duyệt khác.

Khoảng cách lẻ dường như xảy ra do các ký tự dấu cách không phá vỡ (& nbsp;) được chèn ngay trước thẻ span cuối cùng.

Dưới đây là một số hình ảnh mà tôi đã lấy từ ví dụ plunker của bạn để hiển thị điều này.

Các thẻ khoảng cách nào đó đang được tạo mà không có gì trong chúng nhưng các ký tự khoảng trắng.

thể Logic cắt ngắn của mình bằng cách nào đó cho phép chuỗi rỗng hoặc không gian để được chuyển đổi thành các thẻ span với ký tự khoảng trắng không bị phá vỡ? Đó có thể là nguyên nhân gốc rễ của các vấn đề hiển thị của bạn. Tôi hi vọng cái này giúp được.

Answer 3

Bạn đang cố gắng cắt bớt để rút ngắn một đoạn văn bản ngắn. Dòng đề cập không đủ dài để phá vỡ, do đó, nó phá vỡ trên dòng mới, và không có bất kỳ nội dung nào để cắt bớt khi nó đạt đến dòng mới. Nếu bạn loại bỏ các div đang buộc các dòng ngắn, thì nội dung sẽ đến cuối dòng và kết thúc tốt đẹp như bạn mong đợi. Khi bạn nối thêm "showmore" trước phần tử trước đó, thì nó không hoạt động chút nào nếu chỉ có một phần tử, như trong trường hợp của đoạn thứ hai của bạn. Các khoảng trống thừa được đề cập bởi @JohnH khiến định dạng xấu nhưng không gây ra sự cố.