Limit title length on card

[ciucaadrian11]

Is there a way to limit the number of characters to display on the listing card?

Is there a way to limit the length of the title on the listing display card. Example: I want the card to display a maximum of 15 characters. When this number of characters is reached, “…” should appear (Please consult the attached image.

Notes: I don’t want to put a character limit on the title when creating a listing, so that no more than 15 characters can be entered, for example. I just want the title displayed on the listing card to be limited to a number of characters.

I am using TaskHive.

[andrii]

Hi,

Please check the solution in this topic Title character limit.

I hope it helps

[ciucaadrian11]

Hi @andrii
The solution provided by this topic Title character limit is not working. I have used the PHP snippet and is not working.

The full length of the title still appears on the card.

Is there any other solution?

Thank you!

[andrii]

Hi,

Thanks for the details. Please note that this snippet will only be applied when you try to add a new listing or edit an existing one.

[ciucaadrian11]

Hi @andrii
Yes, you provided a solution for the maximum number of characters that can be entered in the title field when creating a new listing or editing an existing listing. I am referring to the maximum length of characters for the title displayed on the card. What I mean is this. In the title field you can enter 50 characters. But when displaying the title on the card, it should not have more than 20 characters, for example.
Is there any other solution?

[ChrisB]

Hey @ciucaadrian11 and @andrii,

I’m also interested in implementing this myself, so I’ll do my best to make it easier to understand.

What we’re looking to do is allow listing titles of any length - whatever is default.

However, on the listing blocks, we would like to set a character limit that will truncate the rest of the title.

E.g

This is my listing title that’s long and looks bad on multiple lines.

Becomes:

This is my listing title…

But, only on the listing view block. If you click the title and visit the listing, you see the full long title as usual.

I hope this makes more sense now!

Cheers,
Chris

[ChrisB]

Hey @ciucaadrian11,

I couldn’t help but try and solve this myself. Just how my brain works!

Anyway, this seems to be working…

Visit the back-end of WordPress, then Appearance > Customise > Additional CSS

Add the following:

.hp-listing--view-block .hp-listing__title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

I hope this helps!

Cheers,
Chris

[ciucaadrian11]

Hi @ChrisB ,
Super, your solution works.

Do you have any idea how I could make the length of the title displayed on the card to be a maximum of two lines? I am satisfied with the solution you provided me, but I would like to extend the displayed title up to two lines. I know that in this case, the card heights will probably not be equal because it is possible that one ad has a short title length so that it is displayed on one line, and another ad has a longer title length so that it will be displayed on two lines.
Thank you very much!

[ChrisB]

Hey @ciucaadrian11,

I’m glad to hear the first snippet I provided worked for you. You can try this version for 2 lines of text.

.hp-listing--view-block .hp-listing__title a {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    max-width: 100%;
}

I’ve only briefly tested this on my phone, so it might still need tweaked!

I hope this helps!

Cheers,
Chris

[ciucaadrian11]

Thank you very much. It works!
As I thought, the cards are not equal in height when, for example, on one card the title is displayed on one row, and on another card the title is displayed on two rows.

But it’s ok. Thank you evry much for your time and for your support!

[ChrisB]

Hi @ciucaadrian11,

Please try the following to attempt to maintain equal block heights:

.hp-listing--view-block {
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.hp-listing--view-block .hp-listing__title a {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    max-height: 3em;
    line-height: 1.5em;
}

.hp-listing--view-block .hp-listing__description {
    max-height: 4em;
    overflow: hidden;
    text-overflow: ellipsis;
}

Edit: updated the code, but again I can only test on my phone at the moment.

Cheers,
Chris

[ciucaadrian11]

Hi @ChrisB ,
Thank you very much. It works. Could I standardize the images on the cards to be equal in height?

As you can see in the picture, the card from left has an image that is bigger on height. And for this reason, the rest of the data on the card (such as the price) are not displayed. If I increase the height of the card, there is too much free space on the other cards. I think the best solution is to set the image to start on the cards. I think the best solution is to set the image to be standard (all images to have the same size) on the cards.

[ChrisB]

Hi @ciucaadrian11,

Try this:

.hp-listing--view-block {
    height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.hp-listing--view-block .hp-listing__image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.hp-listing--view-block .hp-listing__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hp-listing--view-block .hp-listing__title a {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    max-height: 3em;
    line-height: 1.5em;
}

.hp-listing--view-block .hp-listing__description {
    max-height: 4em;
    overflow: hidden;
    text-overflow: ellipsis;
}

Cheers,
Chris

[ChrisB]

If you/anyone else is adding this and using the Geolocation extension, the location information might spill onto two lines, as well.

You can use the following CSS to truncate it:

.hp-listing--view-block .hp-listing__location {
    max-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
}

I hope this helps!

Cheers,
Chris

[ciucaadrian11]

Hi @ChrisB ,
Thank you very much. Thanks to your solutions, everything is displayed correctly and I also solved the problem of displaying the title on 2 lines.

[ChrisB]

You’re welcome, @ciucaadrian11!

Welcome to the community. I hope you enjoy using HivePress

Cheers,
Chris

[ciucaadrian11]

Hi @ChrisB ,
I am satisfied with the functionalities offered by hivepress.
I am satisfied with the functionalities offered by hivepress. And thank you very much for the support.

I have one more request for you, if you have time and you are available. Can you help me with the height alignment of the cards in the slide intended for vendors?

Thank you!

[andrii]

Hi,

Please check the solution in this topic Change height of listing card - #2 by andrii.

I hope it helps