Add Read More Button in HTML

Is the height of your HTML block increased through your text content and do you have no solution to handle this large content? You will got a very impressive solution in few minutes to implement how to add read more button in html.

In this post, we will give you a very classic and best solution to handle the height of the text block of any content. We can truncate the text to display and reduce the length of the content block. We will use a “Read More” button to make content cool and user friendly.

How to make read more button in HTML?

The first stage is to create the text box structure with a button using HTML tags. Once we have created a text box structure, we truncate the text.

<div>
  <p class="truncate">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt nesciunt alias consequuntur
    necessitatibus nulla. Reprehenderit earum soluta voluptates quas ratione, nobis beatae corporis doloremque modi,
    laudantium fugit quidem reiciendis debitis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam laborum
    eum neque consectetur quidem reiciendis rerum illo perferendis, possimus ea ipsa ab consequatur dolor fuga enim quam
    numquam sint ducimus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum laudantium ratione id animi
    mollitia itaque officia, expedita vitae fugit aspernatur fugiat voluptatem quidem, aliquam at. Reiciendis dicta ut
    numquam ipsum.</p> <button type="button" class="toggle inline-flex readmore">Read More</button> <button
    type="button" class="toggle d-none readless">Read Less</button>
</div>

How to truncate text?

We hope you know about CSS style and also HTML tags. Let us begin to truncate the text. We need to add a couple of CSS styles to truncate the content.

p {
  font-size: 14px;
  line-height: 1.7em;
  font-weight: normal;
  letter-spacing: 0.04em;
  font-family: "Roboto", sans-sarif;
}

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toggle {
  border: none;
  background: transparent;
  cursor: pointer;
}

.inline-flex {
  display:
    inline-flex;
}

.d-none {
  display: none;
}

.readmore {
  color: green;
}

.readless {
  color: red;
}

How to create a classic read more button?

If you are a newbie and don’t know how to do it, don’t worry, just follow the steps and copy the code provided. We will use the jquery library to move the read more button.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script> 
  $(".toggle").click(function () { 
    $(this).removeClass("d-inline-flex").addClass("d-none");
    $(this).siblings("button").removeClass("d-none").addClass("d-inline-flex");  
    $(this).parent("").children("p").toggleClass("truncate"); 
  }); 
</script>