[Support request] Dots For Article Title

[Ella]

Hello, I was requested to open a support ticket following this conversation: https://generatepress.com/forums/topic/how-to-increase-the-number-of-words-in-titles/?bbp_reply_to=1821964&_wpnonce=c4e10ccb0b#new-post

I want to add three dots after the text to indicate when a title is not the full length. I got a code recommended which was amazing but it added the dots after the titles that fit in instead of the ones that don’t.

I’m unsure how to attach an image as a link (I have googled it, I’m on a Mac but the instructions didn’t seem to work) but I can send an image via email if easier.

Let me know what code you think I need to add for this. Thanks so much!

All the best,
Ella

[David]

Hi there,

based on the previous example you could try this CSS:

.generate-columns-container article .entry-header .entry-title,
.wp-show-posts article .wp-show-posts-entry-title {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    color: #ff0000; /* Set color of ellipses - 3 dots */
}

[Ella]

Thanks for trying David. That adds the dots but messes up the images and adds the dots to every post title, even the ones that don’t need it, shortening it to one line instead of two too. I can send screenshots via email to show you what it does if easier?

[David]

So do you want to display the title across two lines ( if thats required ) and only show the ellipses if the text would extend to the three lines ?

As thats tricky… let me know.

[Ella]

Yeah, that’s right. The code I got before worked in terms of two lines and ellipses but it put it on the titles that didn’t need it instead of the ones that did. Is it possible do you think?

Thanks,
Ella

[David]

First remove this CSS ( in Customizer > Additional CSS ):

@media (min-width: 768px) {
    .generate-columns-container article .entry-header .entry-title,
    .wp-show-posts article .wp-show-posts-entry-title {
        line-height: 2.5ex;
        height: 5ex;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

And try adding this:

.generate-columns-container article .entry-header .entry-title,
.wp-show-posts article .wp-show-posts-entry-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

[Ella]

Ooh so close! That one picks it up on the posts that overflow which is perfect, it adds it on the second line too which is great, but it then continues to show the third line of text (when it shouldn’t display that until clicked on) and that title text then overlaps the start of the body text below that. Does it need an extra line in perhaps?

[David]

Made an update to the CSS above:
https://generatepress.com/forums/topic/dots-for-article-title/#post-1829510

[Author]

Posts