2

Currently, I have a div with a 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 the text (when wrapped throughout the height of the div) is longer than the div can contain how would I truncate the text using CSS?

The code I am currently using uses a -webkit-line-clamp and ellipsis to truncate the text based off of lines.

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

Unfortunately, I have no way of knowing how many lines are in each div. This is a problem as the divs are being generated dynamically based off of other properties with angular js and ng-repeat.

Stewart Hering
  • 80
  • 1
  • 7
  • @Jacob Actually, I feel like it shouldn't be. The one key difference here is that this person is working with AngularJS, not jquery. The answer to the "duplicate" question only points to jQuery solutions, where as mine points to an AngularJS solution. I think people might benefit from it. – NoobishPro Aug 24 '16 at 01:20
  • OK, thanks, good to know. – Jacob Aug 24 '16 at 01:20
  • The div's height, is it also coming from the payload? or you actually define it in your own css? – choz Aug 24 '16 at 02:12
  • @choz The div's height is defined in css as it is calculated based off the duration of a "task". – Stewart Hering Aug 24 '16 at 13:59

1 Answers1

0

This question has already been asked: With CSS, use "..." for overflowed block of multi-lines - edit: This question only answers with jQuery solutions. Since OP works with Angular and not jQuery, I think it might be valid end edit

-- Ellipsing on multiple lines is in fact, not supported by CSS. Your only solutions would be javascript plugins.

I have fiddled around about 30 minutes to come up with a pure CSS solution for you, but those only work in sloppy ways. For example; adding "..." with an :after psuedo selector, aligning it to the right side. However, with dynamic content this will often create a huge gap between the "..." and the last word. This could then be prevented by using text-align:justify', but honestly, that looks crappy too!

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

Here's an example of a css only solution. As you can see, it's quite messy.

After a long search, I found an angularjs plugin for this. (I think 90% are jQuery?)

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

^ Here you go. Since you are already generating the content with angular, I'm sure adding this little script into the function should be ok, right?

Community
  • 1
  • 1
NoobishPro
  • 2,539
  • 1
  • 12
  • 23