Line-clamped text with ellipsis without pseudo elements

by artoodetoo

HTML

<p class="clamped clamped-2">
    <span class="text">
        There's a bit of text here.
        <span class="ellipsis">
            &#133;
        </span>
        <span class="fill"></span>
    </span>
</p><p class="clamped clamped-2">
    <span class="text">
        But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show.
        <span class="ellipsis">
            &#133;
        </span>
        <span class="fill"></span>
    </span>
</p>

CSS

body {
    background: #fff;
}

.clamped {
    line-height: 1.5;
    overflow: hidden;
    position: relative;
}

.clamped-2 {
    /* Clamp to 2 lines, ie line-height x 2: */
    max-height: 3em;
}

.ellipsis {
    background: #fff;
    bottom: 0;
    position: absolute;
    right: 0;
}

.fill {
    background: #fff; 
    height: 100%;
    position: absolute;
    width: 100%;
}