javascript - Print " Read more .. " inside a div after the content exceds fixed height -

as question indicates below html code :-

html:

<div class="compresscontent"> //the main div     <div class="text"> // lets max width 400px .text        <p style="">           <b style="">   // content should not exceed after height 400px , should display "read more .. "           </b>         </p>     </div> </div> 

css:

.compresscontent {     position:                   relative;     font-family:                sans-serif;     display:                    block;     width:                      244px;     height:                     auto;     overflow:                   hidden; } .compresscontent .text {     color:                      #333;     padding:                    20px;     width:                      204px;     height:                     400px;     overflow:                   hidden;     background:                 #e0e0e0;     font-size:                  .95em;     line-height:                1;     text-align:                 justify; }  .compresscontent .text:after {     content:                    ' ';     position:                   absolute;     display:                    block;     width:                      100%;     height:                     1em;     bottom:                     0px;     left:                       0px;     background:                 #e0e0e0; }  .compresscontent .text:before {     content:                    'read more...';     text-align:                 right;     position:                   absolute;     display:                    block;     width:                      2em;     height:                     1em;     bottom:                     1em;     right:                      20px; } 

but how code ain't giving results needed. can guide me proper syntax? can done using javascript? appreciated.

searched on google & found text-overflow: ellipsis; depends on fixed width whereas here depending on height .

found jsfiddle vertical ellipsis not useful , contains css error's.

any solution?

something this? pure css.

the calculation height: calc(16*20*3); font-size*line-height*-webkit-line-clamp(lines show).

so in case, 3 lines being showed. if want 5 shown instead, change -webkit-line-clamp: 3; -webkit-line-clamp: 5; , height: calc(16*20*3); height: calc(16*20*5);.

hope helps you

* {    margin: 0;    padding: 0;    @include box-sizing(border-box);  }    body {    font-family: helvetica, sans-serif;    color: black;  }    p {    display: block;    display: -webkit-box;    max-width: 400px;    height: calc(16*20*3);    margin: 0 auto;    font-size: 16px;    line-height: 20px;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis;  }

<p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>