Knowledge Walls
John Peter
Pune, Maharashtra, India
How to put dots at end of the div if it has more characters using JQuery?
1341 Views
Notes 
sline_wc is the class selector to put dots at end.
and
include sline_wc_<width> example sline_wc_200, then 200 if the width of the line to shrink the text with dots.
HTML
<div class="sline_wc sline_wc_200 ft_font sz_zone">
       How to find difference between java and java Fx using Highflyer technology.
</div>
JQuery
$(function(){
    $.each($(".sline_wc"),function(){
       var SplitedData = $(this).attr("class").split(" ");
       for (var dataIndex in SplitedData){
         if (SplitedData[dataIndex].startsWith("sline_wc_")){
           $(this).css({"overflow":"hidden",
               "width":parseInt(SplitedData[dataIndex].substring(SplitedData[dataIndex].lastIndexOf("_")+1,SplitedData[dataIndex].length))+40,
               "white-space":"nowrap",
               "position":"relative"});
           $(this).append('<div style="position: absolute;right: 0px;display: inline-block;width: 40px;background-color: white;font-family: arial;"> (..)</div>');
         }
       }
    });
});
Output & Demo 
Best Lessons of "One day One Thing to Know"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details