html - Truncate Multi Line Text Using CSS Based off of Div Height -


currently, have div set height.

<div class="card yellow-task task" style="height: 255px;">     <div class="div-content">     lorem ipsum dolor sit amet, consectetur adipiscing elit.....     </div> </div> 

assuming text (when wrapped throughout height of div) longer div can contain how truncate text using css?

the code using uses -webkit-line-clamp , ellipsis truncate text based off of lines.

display: block; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; 

unfortunately, have no way of knowing how many lines in each div. problem divs being generated dynamically based off of other properties angular js , ng-repeat.

this question has been asked: with css, use "..." overflowed block of multi-lines - edit: question answers jquery solutions. since op works angular , not jquery, think might valid end edit

-- ellipsing on multiple lines in fact, not supported css. solutions javascript plugins.

i have fiddled around 30 minutes come pure css solution you, work in sloppy ways. example; adding "..." :after psuedo selector, aligning right side. however, dynamic content create huge gap between "..." , last word. prevented using text-align:justify', honestly, looks crappy too!

http://codepen.io/natonischuk/pen/kpnkqz

here's example of css solution. can see, it's quite messy.

after long search, found angularjs plugin this. (i think 90% jquery?)

https://github.com/dibari/angular-ellipsis

^ here go. since generating content angular, i'm sure adding little script function should ok, right?


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -