0

hide the rest of article at certain amount of characters

I have a @foreach loop and I want to show the divs in a grid. The problem is some divs have more than x amount of letters of discription, so the style becomes weird. How to hide the text up 40 letters for example like facebook style. I want all the boxes to be identical.

This is what I have right now:

`<div class="row">
@foreach ( $objects as $object )
  <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <div class="panel panel-default">
          <div class="panel-body">
              {{ $object->body }}
      {{ $object->date }}
          </div>
      </div>
  </div>
@endforeach
</div>`

I think, I have to use the server to reload the rest of the discription once ( read more ) has been clicked.

I haven't got any kind of idea how to code this. Wether it is Vue or Angular.

Thanks

Mike
  • 111
  • 1
  • 10

1 Answers1

1

Using Blade, you can use str_limit.

{{ str_limit($object->body, $limit = 40, $end = '...') }}

That would allow you to add an ellipses or anything you wanted to the end for uniformity.

(See this answer: Truncate string in Laravel blade templates)

If you specifically need to do it using Angular, see this answer: Limit the length of a string with AngularJS

garrettmills
  • 660
  • 6
  • 13