Truncating text and adding an ellipsis in CSS -

i'm attempting truncate paragraph of text , adding ellipsis after indicate there more content.

i attempted use css property text-overflow:ellipsis - looking @ examples of seems possible use of no-wrap , can used on single lines of text, not appropriate truncating paragraph.

i came soltuion, almost correct has 1 problem...

so instead of truncating using ellipsis property, truncated old fashioned way using overflow:hidden , setting max-height

.touritem .tourinfo { max-height: 110px; overflow: hidden; display: block; } 

and create neat ellipsis used :after

.touritem .tourinfo:after {content:'...';} 

this seems right way have run 2 problems...

1. the overflow:hidden means :after content doesn't show. it's required controls truncated text!
2. the ellipsis (if take off overflow:hidden) shown underneath section of text. need seem part of line of text...

js fiddle help

working code pure css

check out jsfiddle link, ellipsis added paragraph using css only.

you can customize background according requirements/needs.

html part:

<div class="touritem ">     <div class="tourinfo">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> 

css part:

.touritem {     position: relative;     font-family: sans-serif;     display:  block;     width:  244px;     height: 7em;     overflow: hidden; } .touritem .tourinfo {     color:  #333;     padding:  20px;     width:  204px;     overflow: hidden;     background:  #e0e0e0;     font-size:   .95em;     line-height: 1;     text-align: justify; }  .touritem .tourinfo:after {     content:  ' ';     position: absolute;     display:  block;     width:  100%;     height: 1em;     bottom: 0px;     left:   0px;     background:  #e0e0e0; }  .touritem .tourinfo:before {     content:  '...';     text-align:  right;     position: absolute;     display:  block;     width:  2em;     height: 1em;     bottom: 1em;     right:  20px;     background: -moz-linear-gradient(left,  rgba(224,224,224,0) 0%, rgba(224,224,224,1) 38%, rgba(224,224,224,1) 99%);     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,0)), color-stop(38%,rgba(224,224,224,1)), color-stop(99%,rgba(224,224,224,1)));     background: -webkit-linear-gradient(left,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);     background: -o-linear-gradient(left,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);     background: -ms-linear-gradient(left,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);     background: linear-gradient(to right,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00e0e0e0', endcolorstr='#e0e0e0',gradienttype=1 ); }