For many of you, the question I'm about to ask is quite simple. Take a look at the following HTML code:
<div class="content" id="content">
<div class="container" id="container">
<h1>Title</h1>
<img class="post-img" src="#">
<p class="text" id="text">Lorem500</p>
<div class="button"></div>
</div>
<hr>
<div class="container" id="container">
<h1>Title</h1>
<img class="post-img" src="#">
<p class="text" id="text">Lorem500</p>
<div class="button"></div>
</div>
<hr>
</div>
The goal is to create multiple "blog posts" with a title, image, brief description, and a "Read more" button. I would like to truncate the "text" to 300 characters using JavaScript. I've attempted using both for and while loops, but as a newbie, I'm struggling to get it right.
var content = document.getElementById('content');
while ( content.length >= 0 ) {
$('#text').text(function(i, txt) {
return txt ? txt.slice(0, 300) + " ..." : txt;
});
}
I know it might seem silly, but I've tried various approaches, and this is the latest one I've come up with.
Your assistance would be greatly appreciated. Thank you for taking the time to read this. Your help means a lot to me.