Text overflow '...' in article summary

Question

How do I give a block element with text inside of it a fixed height with '...' in the end for a responsive website?

In essence text-overflow as a CSS property doesn't get the result I need, because '...' needs to be added in the end if there is text-overflow. If there's no text-overflow, then there needs to be '...'. So if text is clipped, '...' is visible on the last line at the end of the sentence.

<article>
    <h1>Title</h1>
    <p>Article description</p>
    <p>Read more...</p>
</article>

This is the basic layout. The actual code is posted below. It makes an article container with an image, a title, a summary and 'read more'.

The boxes are all supposed to be the same size. The title varies in the amount of lines it covers. Sometimes one line, sometimes two. The boxes are supposed to be responsive. The image is located on the left, where the top border is at the same height as the title container's top border.

            <article class="article-grey">
                <h4><a href="http://blog.rondevanlimburg.nl/2015/11/03/topcompetitie-vervolgstappen-2016/">Topcompetitie: Vervolgstappen 2016</a></h4>

                <p>De evaluatie van de Topcompetitie 2015 was duidelijk in zijn eindrapportage… Geslaagd in zijn opzet, aanpak en uitvoering. En dát allemaal in een succesvol wielerjaar. De eerstvolgende stap is nu ...  

                </p><div class="thumbnail-container"><img src="http://blog.rondevanlimburg.nl/wp-content/themes/rondevanlimburg/img/logo_nieuws_gray.svg" alt="img"></div>

                <span><a href="http://blog.rondevanlimburg.nl/2015/11/03/topcompetitie-vervolgstappen-2016/">Lees meer...</a></span>
            </article>

            #news article:nth-child(2) {/*First article different border*/
                border-top-left-radius: 0em !important;
                border-top-right-radius:1em;
            }

            /*Article color*/
            .article-grey {
                background:#efefef;
                border-radius:1em;
                margin-bottom:3em;
                min-height:15em;
                padding:1em 1em 1em 15em;
                position:relative;
                border-top-left-radius: 0em;
                border-top-right-radius: 1em;
            }

Screenshot of what I want

Possible duplicate of [HTML text-overflow ellipsis detection](http://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection) — disappointed in SO leadership, Nov 25 '15 at 13:30
Please remove the `php` and `jquery`tags, this is a css only issue. — arkascha, Nov 25 '15 at 13:30
It's not a duplicate. That question talks about detecting whether text overflows or not using jquery. — Solsroyce, Nov 25 '15 at 13:44

score 2 · Accepted Answer · answered Nov 25 '15 at 13:49

2

I am not sure if you can set 'ellipsis' (or similar) at the end of text in box with fixed height, but here is a great looking solution for your problem..

Create new element with (for example):

position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2rem;
box-sizing: border-box;
background-image: linear-gradient(rgba(255,255,255,.1),white 75%);

and put it inside of 'description' element. Also, don't forget to set position: relative; for your description element.

Here is a working fiddle.. hope it will help you: https://jsfiddle.net/hmyqrmzs/

Screenshot example:

answered Nov 25 '15 at 13:49

Dejan Munjiza

790
1
12
23

That's a great alternative but I can't do concessions to the design. – Solsroyce Nov 25 '15 at 13:57
@user2656265 can you use something like this: https://jsfiddle.net/d9yv5Lva/ You can count maximum number of characters you can fit in one box by typing only W inside of it (considering that W is probably the character with biggest 'width' :) ).. – Dejan Munjiza Nov 25 '15 at 14:09

Text overflow '...' in article summary

1 Answers1