Knowledge Walls
John Peter
Pune, Maharashtra, India
How to put dots at end of the div if it has more characters using JQuery?
2148 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 
Next Topics
Next lessons of current book.
Computer software engineer articles of One day One Thing to Know
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