Alternative to webkit line clamping for Internet Explorer 11?

Question

I'm currently using the below code to limit lines and it works great on most browsers except IE 11.

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

I've looked at many posts about this and many of them are hacky solutions which would probably not work if a user changes his/her browser view settings like font-size. Is there a css alternative for this in IE 11?

Answer 1

Try this using :after

 p { font-size: 26px; font-family: serif; } .line-clamp { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; } .line-clamp:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(1em * 1.2); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%); } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } } .line-clamp-2 { -webkit-line-clamp: 2; height: calc(1em * 1.2 * 2); }

 <p class="line-clamp line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 5 COPY Icon copy red DISCOVER MORE! Take a deep dive and try our list of over 40 unique generators, find placeholder images for your next design, or add a lorem ipsum plugin to the CMS or text editor of your choice. What is Lorem Ipsum? From its medieval origins to the digital era, learn everything there </p>

Answer 2

I think the easiest and most compatible way across browsers is to use Clamp.js . You could check the sample below:

 var module = document.querySelector(".box p"); $clamp(module, { clamp: 2 });

 body { align-items: center; background: radial-gradient( farthest-side at bottom left, rgba(255, 0, 255, 0.5), #246756), radial-gradient( farthest-corner at bottom right, rgba(255, 50, 50, 0.5), #246756 400px); display: flex; height: 100vh; justify-content: center; line-height: 1.5; } .box { background-color: #fff; box-shadow: 2px 2px 10px #246756; padding: 2em; width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.js"></script> <div class="box"> <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p> </div>

If you want more alternatives including pure css way, you could refer to this article .