Line-clamped text with ellipsis without pseudo elements

by Fiddel

HTML

<p class="text-overflow">
     Fenster zusammenziehen, bis Textmenge die maximale Containerhöhe überschreitet!
</p>

CSS

.text-overflow {
    line-height: 20px;
    /* max-height: calc(2*20px); */
    max-height: calc(2*20px);
    overflow: hidden;    
    
    position: relative;
    
    background-color:red;
    
}


.text-overflow:before {
    content:"…";
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: inherit;
}

.text-overflow:after {
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: blue;
}