If you are creating web-application, some points we cannot show complete text of a value inside table or a div, at that point we can create a jQuery & Javascript based function to show some text and hide the exceeded text, by adding "Show more" button, and on clicking "Show more", we can show the hidden text. Basically we will create a function to expand/collapse text.

You can use the JavaScript substring() method in combination with the jQuery append() and html() method to cretae expand/ collapse link at the end of paragraphs  or div  if the number of characters inside a paragraph/div exceeds a certain length.

Let's try to create one using the above procedure:

  1. You would have to create a class to hide the extended text, so add a class .showMore with display:none property
    .morecontent span {
    display: none;
}
.ReadMore {
    display: visible;
}
  2. Now you need to create the Javascrip/jQuery based function as shown below
    $(document).ready(function(){
        //length in characters
    var maxLength = 200;
    var ellipsestext = "...";
    var moretext = "Read more";
    var lesstext = "Read less";
    $(".showReadMore").each(function(){
        //get the text of paragraph or div
        var myStr = $(this).text();
        
       // check if it exceeds the maxLength limit
        if($.trim(myStr).length > maxLength){
            //get only limited string firts to show text on page load
            var newStr = myStr.substring(0, maxLength);

            //get remaining string         
 var removedStr = myStr.substr(maxLength, $.trim(myStr).length - maxLength);
            // now append the newStr + "..."+ hidden remaining string
            var Newhtml = newStr + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + removedStr + '</span>&nbsp;&nbsp;<a href="javascript:void(0)" class="ReadMore">' + moretext + '</a></span>';
 
            $(this).html(Newhtml);
            
        }
    });
    
    //function to show/hide remaining text on ReadMore button click
    $(".ReadMore").click(function(){
       
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        }
         else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});


  3. Create HTML text to test the string
     <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="showReadMore">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>?

Now we have all the code, if you will execute this in browser, you should see output like below

read-more-less-using-jquery-javascript-min.gif

Here is the complete code

<style type="text/css">
  
  .morecontent span {
    display: none;
}
.ReadMore {
    display: visible;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        //length in characters
    var maxLength = 200;
    var ellipsestext = "...";
    var moretext = "Read more";
    var lesstext = "Read less";
    $(".showReadMore").each(function(){
        //get the text of paragraph or div
        var myStr = $(this).text();
        
       // check if it exceeds the maxLength limit
        if($.trim(myStr).length > maxLength){
            //get only limited string firts to show text on page load
            var newStr = myStr.substring(0, maxLength);

            //get remaining string         
 var removedStr = myStr.substr(maxLength, $.trim(myStr).length - maxLength);
            // now append the newStr + "..."+ hidden remaining string
            var Newhtml = newStr + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + removedStr + '</span>&nbsp;&nbsp;<a href="javascript:void(0)" class="ReadMore">' + moretext + '</a></span>';
 
            $(this).html(Newhtml);
            
        }
    });
    
    //function to show/hide remaining text on ReadMore button click
    $(".ReadMore").click(function(){
       
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        }
         else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
</script>

</head>
<body>    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="showReadMore">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>

Codepen working sample:

Pure Javascript Based Read More/Less

If you don't want jQuery based solution you can also create read more-read less button using pure javascript, here is the sample javascript code

var elements = document.getElementsByClassName("show-more");

var click_event = function() {
		var linkText = this.innerHTML.toUpperCase();
    if (linkText === "SHOW MORE") {
    		this.innerHTML = "Show less";
        this.previousElementSibling.classList.remove("hideContent");
        this.previousElementSibling.classList.add("showContent");

    }
    else {
    		this.innerHTML = "Show more";
        this.previousElementSibling.classList.remove("showContent");
        this.previousElementSibling.classList.add("hideContent");
    }
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', click_event, false);
}

with CSS as below

section {
  margin: 20px;
}
.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}
.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}
.show-more {
    padding: 10px 0;
    text-align: center;
}

and HTML as below

<section>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <a class="show-more" href="#">Show more</a>
</section>

Here is the fiddle for demo purpose: https://jsfiddle.net/Lzbg103x/

In the above code, we are hiding overflow content of div using CSS property "overflow:hidden" and by giving div a height so it can hide content after certain height.

While in Javascript code, when "Show-More" is clicked, we are simply removing class "hideContent" and adding back when "Show less" is clicked.

You may also like to read:

Custom Checkbox and Custom Radio buttons in HTML / CSS

How to make image rotate in 360 degrees in HTML using jQuery / Javascript

Social media icons hover effect (CSS Based)