Question

我正在尝试使用text-overflow: ellipsis;属性截断长文本。我试过这个

overflow: hidden;
-webkit-line-clamp: 4; 
text-overflow: ellipsis;

小提琴：http://jsfiddle.net/TReRs/354/

它在chrome中运行良好，但 -webkit-line-clamp 在Firefox和IE中不支持。任何人都可以帮助我，还有其他任何属性。

Answer 1

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/

CSS：在Firefox，IE中替换-webkit-line-clamp

1 个答案: