Line-clamped text with ellipsis without pseudo elements

by artoodetoo

HTML

<p class="container">


        But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show.       
        
             
</p>

CSS

body {
    background: #fff;
}

.container {
margin: 30px 0;
line-height: 1.5;
overflow: hidden;
position: relative;
max-height: 4.5em; /*display ellipsis after 3 lines*/
}

.container:before  {
background: #fff;
bottom: 0;
position: absolute;
right: 0;
content: '\2026';

}

.container:after{
content: '';
background: #fff;
position: absolute;
height: 50px;
width: 100%;
z-index: 1;
}