Giải pháp đa trình duyệt hoạt động
Vấn đề này đã gây khó chịu cho tất cả chúng ta trong nhiều năm.
Để giúp đỡ trong mọi trường hợp, tôi đã đưa ra cách tiếp cận CSS duy nhất và cách tiếp cận jQuery trong trường hợp các cảnh báo css là một vấn đề.
Đây là một giải pháp CSS duy nhất mà tôi đã đưa ra với nó hoạt động trong mọi tình huống, với một vài cảnh báo nhỏ.
Điều cơ bản là đơn giản, nó che giấu sự tràn của nhịp và đặt chiều cao tối đa dựa trên chiều cao của đường theo đề xuất của Eugene Xa.
Sau đó, có một lớp giả sau div có chứa dấu chấm lửng độc đáo.
Hãy cẩn thận
Giải pháp này sẽ luôn đặt dấu chấm lửng, bất kể nếu có nhu cầu.
Nếu dòng cuối cùng kết thúc bằng một câu kết thúc, bạn sẽ kết thúc bằng bốn dấu chấm ....
Bạn sẽ cần phải hài lòng với căn chỉnh văn bản hợp lý.
Dấu chấm lửng sẽ ở bên phải của văn bản, có thể trông cẩu thả.
Mã + Đoạn trích
jsfiddle
.text {
position: relative;
font-size: 14px;
color: black;
width: 250px; /* Could be anything you like. */
}
.text-concat {
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
line-height: 1.2em;
text-align:justify;
}
.text.ellipsis::after {
content: "...";
position: absolute;
right: -12px;
bottom: 4px;
}
/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text ellipsis">
<span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.
Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
</span>
</div>
Phương pháp tiếp cận jQuery
Theo tôi đây là giải pháp tốt nhất, nhưng không phải ai cũng có thể sử dụng JS. Về cơ bản, jQuery sẽ kiểm tra bất kỳ phần tử .text nào và nếu có nhiều ký tự hơn var tối đa được đặt trước, nó sẽ cắt phần còn lại và thêm dấu chấm lửng.
Không có lời cảnh báo nào cho cách tiếp cận này, tuy nhiên ví dụ mã này chỉ nhằm thể hiện ý tưởng cơ bản - Tôi sẽ không sử dụng nó trong sản xuất mà không cải thiện nó vì hai lý do:
1) Nó sẽ viết lại html bên trong của elt .text. dù cần hay không. 2) Không có kiểm tra nào để kiểm tra xem html bên trong không có các phần tử lồng nhau - vì vậy bạn đang phụ thuộc rất nhiều vào tác giả để sử dụng chính xác .text.
Đã chỉnh sửa
Cảm ơn bạn đã bắt @markzzz
Mã & Đoạn
jsfiddle
setTimeout(function()
{
var max = 200;
var tot, str;
$('.text').each(function() {
str = String($(this).html());
tot = str.length;
str = (tot <= max)
? str
: str.substring(0,(max + 1))+"...";
$(this).html(str);
});
},500); // Delayed for example only.
.text {
position: relative;
font-size: 14px;
color: black;
font-family: sans-serif;
width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>
<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
<!-- Working Cross-browser Solution
This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->