How To Create Read More Less Text Using CSS and JavaScript

In this example, we will display a few lines of text in a paragraph using CSS properties. Also, when the user clicks "Read More", the readMore() function is called, which toggles the CSS class using the toggle() method.

Ouput

Example

<html>
  <head>
    <style>
      .show-few-lines{
        display: -webkit-box;
        overflow : hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
      }
    </style>
  </head>
  <body>
    <div style='width:500px;'>
      <p class='read_more_text show-few-lines'>
        Out of another, I get a lovely view of the bay and a little private wharf belonging to the estate. There is a beautiful shaded lane that runs down there from the house. I always fancy I see people walking in these numerous paths and arbors, but John has cautioned me not to give way to fancy in the least. He says that with my imaginative power and habit of story-making a nervous weakness like mine is sure to lead to all manner of excited fancies and that I ought to use my will and good sense to check the tendency.
      </p>
      <a href='#' onclick='readMore(this,event)'>Read More</a>
    </div>
    <script>
      function readMore(ele,eve){
        eve.preventDefault();
        var txt = document.querySelector(".read_more_text");
        txt.classList.toggle("show-few-lines");
        
        if(txt.classList.contains("show-few-lines")){
          ele.innerText = "Read More";
        }else{
          ele.innerText = "Read Less";
        }
      }
    </script>
  </body>
</html>

Try it Yourself

Others

Others

How To Create Read More Less Text Using CSS and JavaScript