how can i display partial title in colletion

[anhtaivnpro]

 

How can i display partial title in colletion like image 1?

Thanks

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[PageFly-Noah · Accepted solution]

Hi @anhtaivnpro  you can add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
.card__content .card__information .card__heading .full-unstyled-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    width: 200px !important;
    text-overflow: ellipsis !important;
}

</style>

Hope my solution will help you resolve the issue.

Thank you.
 

[anhtaivnpro]

Thanks so much, it's worked!

[Hardik29418]

Hello,

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

[niraj_patel]

Hello @anhtaivnpro 
Can you share store URL?

[anhtaivnpro]

Yes, my store: http://vartdigitals.com

[Asad-Mahmood]

Go to your online store -> customize -> settings -> custom css
and paste this code there

.card__heading {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

[hamzaadeel]

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

.card__content .card__information .card__heading .full-unstyled-link {
width:200px white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 450px) {
.card__content .card__information .card__heading .full-unstyled-link {
width: 142px;
white-space: nowrap;
overflow: hidden;
overflow:hidden;
text-overflow: ellipsis;
}
}

[tmyusuf]

@anhtaivnpro @ 

Log in to your Shopify admin panel
Navigate to Online Store > Themes.
Select the theme you want to modify and click Actions > Edit code.

Find the title section: H3

You can use this code 

.card__heading {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

I will hope this will helpful 

[anhtaivnpro]

 Thanks!!! That's great!

[hamzaadeel]

@anhtaivnpro 
Please mark my solution correct if you found it helpful.
Thanks.

[anhtaivnpro]

I tried this method from mr  PageFly-Noah and it worked. Thanks all

[hamzaadeel]

You will have empty space ahead by going with that.
you should have the text as the width of image at least.