0

Lets say I have a simple div in which I want to generate ads from database. I cannot predict how long the description will be.

 <div class="ads-front col-sm-6 col-md-4">
  <h2 class="col-xs-12">Ad title</h2>
  <h3 class="col-xs-12">Ad location</h3>
  <p class="col-xs-12 ad-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing     
    elit. Donec consectetur egestas risus ut tempor. Praesent eu 
    fringilla nisl. Nullam blandit id nisi ac dapibus. Pellentesque 
    laoreet
  </p>
  <button class="red-button-front red-button col-xs-6">More</button>
</div>

So I would like to set the container to max-height of lets say 300px. I could use overflow:hidden but it would do a nasty crop in my text. I would like a clean cut after 400 characters with last 3 chars to be "..." as in "See more by clicking 'More'"

I have a hunch that someone has already done snippet for this, or there is an elegant was of doing this in Jquery.

fedorqui
  • 275,237
  • 103
  • 548
  • 598
CountGradsky
  • 268
  • 2
  • 4
  • 15

1 Answers1

2
div {
    text-overflow: ellipsis;
    overflow: hidden;
}

There's no way to cut after 400 characters in CSS

yuk
  • 945
  • 7
  • 14