how to add ReadMore in paragraph - php

Question

I have a controller for homepage which gives $posts var which includes that post title and body and sometimes there may be a large amount of text in the body
return view('posts.index',compact('posts'));
and I want to hide all paragraph text and add a button called ReadMore which shows full paragraph
I saw the following bootstrap examples
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
<h2>Read More Read Less Button</h2>
<p>Lorem ipsum imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
in the above example text there is span id in middle and here I don't know how do I add that span between $post->body data. is there any way to make a ReadMore and ShowLess feature?
I am currently showing data as
<p>{!!$post->body!!} </p>

Answer 1

Try something like given below code:
{{ substr( $post->body, 0, random_int(60, 150)) }}
And for read more you can link the single article in anchor tag:
Read more

Answer 2

I have a CSS approach. You can set a CSS class to style it as an truncated text (when the max height exceeded with long text):
.post .post-short-description {
height: 36px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; /* How many lines before truncated */
-webkit-box-orient: vertical;
}
In your view.blade.php:
#php
$hasLongBody = strlen($p->body) >= 150;
#endPhp
<div class="post">
<h3> {{ $p->title }} </h3>
<p class="post-short-description"> {{ $p->body }} </p>
<a href="{{ route('postDetail', $p->id) }}" #class([
'd-none' => !$hasLongBody
])> Readmore </a>
</div>