Làm tăng chiều cao vùng chứa, thêm ... vào từ cuối cùng trong đoạn

Question

Tôi có div.infotext với một đoạn bên trong. Tôi animate chiều cao của div đó đến 120px. Vì vậy, có nhiều văn bản dưới đây, không được hiển thị, vì chiều cao cắt nó đi.

Toàn bộ văn bản xuất hiện khi tôi di chuột qua div đó.

Vấn đề tôi đang gặp phải là, không có chỉ báo rằng có nhiều văn bản bên trong đoạn này. Tôi muốn thêm ba dấu chấm (...) vào cuối của từ cuối cùng được hiển thị, và biến mất khi tôi đang lơ lửng div.

Bất kỳ ý tưởng nào?

CẬP NHẬT: Đã thêm mã.

function enableHoverQuotes(){ 

var height3 = $('.c2244').height(); 
$('.introtext').css({ height: '107px', overflow: 'hidden' }); 

$(".introtext").hoverIntent(showInfoText,hideInfoText); 

function showInfoText(){ $(this).animate({'height':height3}, 600); } 
function hideInfoText(){ $(this).animate({'height':'107'}, 600); } 

} 

Answer 1

Bạn có thể thêm <p>...</p> ở dưới cùng bên phải của div với vị trí tuyệt đối và ẩn nó khi di chuột. Điều này sẽ xem xét cho người dùng như ist văn bản thực sự cắt giảm. Ví dụ:

CSS: 
.more { 
position:absolute; 
bottom:0; 
right:0; 
background: #fff; 
} 

.container { 
position:relative; 
height:120px; 
overflow: hidden; 
} 

HTML: 
<div class="container"> 
<p>Fill in a lot of text here</p> 
<p class="more">...</p> 
</div> 

Answer 2

Thêm css này ...

div.infotext 
{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Đó sẽ thêm ... ở phần cuối của div, nếu có nhiều văn bản hơn. Mã hiển thị/ẩn trước đó của bạn sẽ vẫn hoạt động mà không ảnh hưởng đến điều này.

Answer 3

Một cách có thể sẽ chỉ thêm một div nổi đến góc dưới bên phải của div cha mẹ nếu scrollHeight lớn hơn chiều cao

Mã có thể giống như thế:

if ($(element)[0].scrollHeight > $(element).height()) { 
    $(element).append('<div style="position:absolute;bottom:0;right:0" id="overflow">...</siv>'); 
} 

và sau đó bật/tắt id = "overflow" để ẩn nó khi div được mở rộng.

Answer 4

CSS3 cung cấp thuộc tính tràn luồng văn bản nơi bạn có thể xác định những gì bạn muốn xảy ra khi văn bản tràn phần tử chứa. Hỗ trợ trình duyệt là có trong tất cả các browsers- lớn bạn có thể đọc thêm về nó ở đây: https://developer.mozilla.org/en/CSS/text-overflow

Những gì bạn phải làm là thêm tài sản text-overflow để introtext bạn css

Answer 5

Làm thế nào về điều này: http://jsfiddle.net/M5rzC/4/