Create classic read more button

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?

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> 
Want to Get Good Website? Please Fill the Form