Applying an ellipsis to multiline text
I finally found a solution to do what I want.
As p
a paragraphe and article
the wrapper.
If you want to apply ellipsis to p
depending on article
height (which also depends on window height), you need to get the height
of the article
, the line-height
of the p
and then articleHeight/lineHeight
to find the number of line-clamp
that can be added dynamically then.
The only thing is the line-height
should be declared in the css file.
Check the following code. If you change the height of the window, the line-clamp
will change. Can be great to create a plug-in aiming to do that.
jsfiddle
function lineclamp() { var lineheight = parseFloat($('p').css('line-height')); var articleheight = $('article').height(); var calc = parseInt(articleheight/lineheight); $("p").css({"-webkit-line-clamp": "" + calc + ""});}
$(document).ready(function() { lineclamp();});
$( window ).resize(function() { lineclamp();});
article { height:60%; background:red; position:absolute;}
p { margin:0; line-height:120%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>
With CSS, use ... for overflowed block of multi-lines
There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:
- http://pvdspek.github.com/jquery.autoellipsis/
- http://dotdotdot.frebsite.nl/
- http://keith-wood.name/more.html
- http://github.com/tbasse/jquery-truncate
There also some preformance tests.
Related Topics
Anyone Know What The Purpose of Tagging a Class with *[Class]
Styling a Hover Statement in Svg
How to Change Background Color of Active Radio Button in React-Bootstrap
Redmine 3.3.0 (Ruby on Rails 4.2.6) Stylesheets Not Generated/Included in Application.CSS
Vertical Alignment of Column Rows in Bootstrap Grid
How to Give a Bootstrap Btn a 5 Point
How to Map CSS and Js File from Jsp File in Spring Mvc
Tailwindcss Not Using My Custom Class Inside Breakpoints
CSS3 Flexbox Adjust Height of Vertically Aligned Elements
If I Use .Container-Fluid in Bootstrap 3, Does That Mean I Need to Use Grid Classes
Wrap Bootstrap Navbar List Items Around Centered Brand Image
Background Image with Overlay CSS
Postcss - Color Function Plugin - "Unable to Parse Color from String"
Child Div Is Bigger Than Parent Div