JS的解決方案:
var ellipsisText = function (e, etc) {
var wordArray = e.innerHTML.split(" ");
while (e.scrollHeight > e.offsetHeight) {
wordArray.pop();
e.innerHTML = wordArray.join(" ") + (etc || "...");
}
};
用法:
HTML
<div class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi ut aliquip ex ea commodo consequat sum dolor sit 123
</div>
CSS
.block-with-text {
line-height: 1.4em;
max-height: 5.6em; /* max: 4 lines */
}
JS
[].forEach.call(document.querySelectorAll(".block-with-text"), function(elem) {
ellipsisText(elem);
});
JS小提琴:http://jsfiddle.net/TReRs/360/
看看http://stackoverflow.com/questions/18763551/clamping-lines-without-webkit-line-clamp – Kai
這也可能有助於你:https://css-tricks.com/line-clampin/ – 2016-11-15 10:04:08