Responsive Demo of Dynamic Overflow: Ellipsis
See Github Repo for more: https://github.com/jakedowns/ellipsizer
Here's our JS-augmented example:
(div > multiple p tags)
1. try changing the max number of lines
2. try resizing your browser to see how the plugin updates it's calculations
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta.
Here's a CSS example that fails:
(div > multiple p tags)
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta.
Here's a CSS-only example that works (but is janky)
(single p tag w/ br tags)
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere
blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel,
ullamcorper sit amet ligula. Sed porttitor lectus nibh. Mauris blandit
aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus
suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan
id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id
imperdiet et, porttitor at sem.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin
eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id
enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus
suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci
porta dapibus. Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit
amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed
magna dictum porta.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris
blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit
tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam
vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id
imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget
consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia
in, elementum id enim. Nulla porttitor accumsan tincidunt. Nulla quis lorem
ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque
nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies
ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit
aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien
massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor
risus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget
consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus
convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in,
elementum id enim. Vivamus magna justo, lacinia eget consectetur sed,
convallis at tellus. Cras ultricies ligula sed magna dictum porta. Cras
ultricies ligula sed magna dictum porta.