如何在段落中添加阅读更多内容

Question

我有一个主页控制器，它提供$postsvar，其中包括帖子标题和正文，有时正文中可能有大量文本

return view('posts.index',compact('posts'));

我想隐藏所有段落文本并添加一个名为“阅读更多”的按钮，该按钮显示完整段落我看到了以下引导示例

return view('posts.index',compact('posts'));

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";
  }
}

在上面的示例文本中，中间有 Span id，这里我不知道如何在$post->body数据之间添加该 Span。有什么办法可以实现 ReadMore 和 ShowLess 功能吗？我目前显示的数据为

<p>{!!$post->body!!} </p>

Answer 1

尝试类似下面给出的代码：

{{ substr( $post->body, 0, random_int(60, 150)) }}

要阅读更多内容，您可以链接锚标记中的单篇文章：

<a href="/post/{{ $post->id }}">Read more </a>