Mothereffin Css Ellipsis

by spoike

HTML

<article>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum, sem eu interdum lacinia, magna risus faucibus massa, ac tincidunt felis dolor sed neque. Donec suscipit congue odio sed imperdiet. Integer rutrum elit quis massa rutrum iaculis. Pellentesque laoreet vitae elit id rutrum. Quisque a consequat risus, in dapibus urna. Fusce auctor porta libero, nec dignissim ante euismod vel. Nulla sed porttitor enim. Nulla suscipit porta ultrices. Etiam adipiscing dui id ipsum blandit, quis aliquet purus euismod. Suspendisse non turpis mauris. Cras faucibus nunc erat, rhoncus consectetur nunc tempor nec. Donec porta, lacus id rhoncus lacinia, ligula nibh euismod nisi, sed consectetur nulla ante porttitor augue. Mauris quis eros felis. Phasellus faucibus eu nunc faucibus gravida. Integer varius enim volutpat est feugiat sodales.</p>
    <p>Lorem ipsum dolor sit amet, ellipses are <strong>fabulous!</strong></p>
</article>

CSS

article {
    width: 280px;
}
p {
    height: 4em;
    overflow: hidden;
    border: solid red 1px;
    position: relative;
}
p:after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
}