CSS: replacement for -webkit-line-clamp in Firefox, IE
JS solution:
const ellipsisText = (e, etc) => {
const wordArray = e.innerHTML.split(" ");
while (e.scrollHeight > e.offsetHeight) {
wordArray.pop();
e.innerHTML = wordArray.join(" ") + (etc || "...");
}
};
[].forEach.call(document.querySelectorAll(".block-with-text"), function(elem) {
ellipsisText(elem);
});
.block-with-text {
padding: 10px 0 0 0;
display: block;
display: -webkit-box;
height: 85px;
width: 200px;
margin: 0 0 15px 0;
font-size: 14px;
line-height: 1.4;
line-height: 1.4em;
max-height: 5.6em;
/* max: 4 lines */
}
<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>
Nagarjuna Reddy
Hello, My name is Nagarjuna. I have almost 5 years of experience in UI/Front-end development. I worked for various domains and migrated legacy applications screens to new/latest screens using Angular & Bootstrap. I have hands-on experience in designing responsive screens. I have experience in working with Agile methodology and hands-on experience in using Git, JIRA, Microsoft Azure and basic knowledge in Database Design, Querying and consuming Web Services. Skill : Angular, Angularjs, Javascript, JQuery, HTML, CSS, Bootstrap, Kendo UI, Angular Material, D3.js. Thanks, Nagarjuna
Updated on June 04, 2022Comments
-
Nagarjuna Reddy almost 2 years
I am trying to truncating a long text using
text-overflow: ellipsis;
property. I tried thisoverflow: hidden; -webkit-line-clamp: 4; text-overflow: ellipsis;
Fiddle : http://jsfiddle.net/TReRs/354/
It works fine in chrome, but -webkit-line-clamp is not supporting in Firefox and IE. Can anyone help me, is there any other properties for that.