CSS：替换Firefox中的-webkit行夹，IE

我正在尝试使用text-overflow: ellipsis;属性截断长文本。我想这CSS：替换Firefox中的-webkit行夹，IE

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

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

它工作在铬罚款，但-webkit-线钳没有在Firefox和IE浏览器支持。任何人都可以帮助我，是否有任何其他属性。

来源

2016-11-15 NNR

看看http://stackoverflow.com/questions/18763551/clamping-lines-without-webkit-line-clamp – Kai

这也可能有助于你：https：//css-tricks.com/line-clampin/ – 2016-11-15 10:04:08

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 */ 
}

[].forEach.call(document.querySelectorAll(".block-with-text"), function(elem) { 
    ellipsisText(elem); 
});

JS小提琴：http://jsfiddle.net/TReRs/360/

来源

2016-11-15 09:53:32

CSS：替换Firefox中的-webkit行夹，IE

回答

相关问题