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
Post a Comment