Solved

Cart Drawer how to show "..." when item name is too long for 2 lines

flo3393
Excursionist
31 2 5

Hi!

how can i setup showing "..." after item name in cart drawer when it is too long for two lines, so lenght will be reduced?

 
 
 
Accepted Solution (1)
TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

I hope I haven't misunderstood you! The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

  • Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes
.cart-item__name {

    display: -webkit-box!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  
}

 

shopify.base.css.jpg

 

TerenceKEANE_0-1713521381233.png

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 5 (5)

TerenceKEANE
Shopify Partner
511 86 78

Hi

 

It can be done with manual coding. What is the website name?

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
flo3393
Excursionist
31 2 5

Website is: www.jamocards.de

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

I hope I haven't misunderstood you! The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

  • Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes
.cart-item__name {

    display: -webkit-box!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  
}

 

shopify.base.css.jpg

 

TerenceKEANE_0-1713521381233.png

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
flo3393
Excursionist
31 2 5

Thank you very much!

TerenceKEANE
Shopify Partner
511 86 78

You're most welcome! It was just a small thing for me 😊

 

I'm not entirely sure what level of support you're looking for, but if you require fast and detailed coding assistance, please let me know.

 

We offer the Unique "Premium Coding Support" plans at affordable rates, including monthly, quarterly, bi-annual, and annual options, starting at 59 USD for 1 month! In addition to coding support, we also provide professional SEO reports at regular intervals, Advanced animation (Advanced CSS and JavaScript) coding assistance, Expert Consulting, Dedicated Custom Front-End Service and Coding, and Unique Mobile Premium Features. If you're interested, you can check out the link in my signature. Feel free to reach out via private message if you have any questions. 😉

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites