dotdotdot thêm ellipsis ngay cả khi không cắt ngắn

tôi sử dụng dotdotdot để cắt xén văn bản về chiều cao quy định hộpdotdotdot thêm ellipsis ngay cả khi không cắt ngắn

<div class="product-description dotdotdot" style="word-wrap: break-word;"> 
    <div class="product-description-icon"> 
     <span> 
      <img src="product_gloves.png" alt="Gloves"> 
     </span> 
    </div> 
    <h4>Gloves</h4> 
    <p>Some gloves text...</p> 
</div>

jQuery:

My product-description dotdotdot có một min-height của 100px, và các văn bản có dấu chấm lửng ở cuối, nhưng văn bản không bị cắt ngắn và vẫn còn rất nhiều không gian trống.

Cảm ơn bạn đã giúp đỡ của bạn

Nguồn

2016-01-14 Leeroy521

Có lý do nào bạn đang sử dụng plugin jquery cho hình elip hay không chỉ sử dụng CSS? https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – ntgCleaner

Tôi đã tải dotdotdot và theo README.md và nó đang làm việc tốt (trừ ngày $(window).resize).

Bạn có thể cần phải cung cấp bối cảnh nhiều hơn với câu hỏi của bạn:

Bạn có bao gồm tất cả các .js file cần thiết trong <head> đánh dấu của bạn và theo thứ tự đúng?
là jQuery của bạn được bao bọc trong một $(document).ready(function() {kịch bản của bạn});

Tôi đã không nhìn sâu vào kịch bản dotdotdot được nêu ra. Mỏ đang sử dụng chính xác tập lệnh này:

$(document).ready(function() { 
    $(".wrapper").dotdotdot({ 
     // configuration goes here 
    }); 
});

Xem nhanh Tôi tự hỏi nếu bạn chọn tên lớp là .dotdotdot có thể gây ra sự cố. Có lẽ đổi tên các lớp học của bạn để đọc .product-description-wrapper và chạy tập lệnh trên lớp đó.

Hy vọng điều này sẽ giúp bạn

Nguồn

2016-01-25 22:28:40 danMad

Tôi sẽ sử dụng một tinh khiết CSS3 cách tiếp cận thay vì jQuery.

Dưới đây là hai trong số các hỗn hợp yêu thích của tôi SASS để đạt được cả từ gói hoặc hình elip;

@mixin word-wrap() { 
    word-break:  break-word; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens:   auto; 
} 

@mixin ellipsis() { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

Nguồn

2016-01-27 12:45:49

dotdotdot thêm ellipsis ngay cả khi không cắt ngắn

Trả lời

Các vấn đề liên quan