(SO - 23042335)Know more , Know less

by Jessel John

HTML

<div id="wrapper">
<div id="wrappingText">This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.  Thanks.This is an example of a div that has wrapping text lines. 
Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.  Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.</div>
</div>

CSS

#wrapper{
    position:relative;
}
html,body,#wrapper,#wrappingText{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
#wrappingText{
    display:inline;
    overflow:hidden;
}
.knowMore{
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:white;
    color:blue;
    cursor:pointer;
}
.knowMore:before{
    content:"...";
}
.knowMore:after{
    content:"More";
}
.knowLess:before{
    content:"";
}
.knowLess:after{
    content:"Less";
}

.visible{
    overflow:visible !important;
}

.parentClick{
    width:auto !important;
    height:auto !important;
}

JavaScript

/*Only change required in this script if id name of div containing text is different*/
var txtCont = $('#wrappingText');
/*******************************/
var lines = txtCont.get(0).getClientRects();
txtCont.css('display','inline-block');

jQuery.fn.exists = function(){return this.length>0;}

function debugTxt(txt)
{
    var lineHeight = txtCont.css('line-height').replace("px", '');
    var txtContHeight = txtCont.height();
   txtCont.parent().height(lineHeight*Math.floor(txtContHeight/lineHeight));
    if (txt*lineHeight>txtContHeight){
       if(!txtCont.parent().find('.knowMore').exists()){
       txtCont.parent().append('<div class="knowMore">Know </div>');
       }}
   else
      txtCont.parent().find('.knowMore').remove();
}
debugTxt(lines.length);

$('.knowMore').click(function(){
    $(this).prev().toggleClass("visible");
    $(this).toggleClass('knowLess');
    $(this).parent().toggleClass("parentClick");
});