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

Store Design
, , ,
1

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?

2

Hi

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

Terence.

3

Website is: www.jamocards.de

4

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
shopify.base.css.jpg1878×902 166 KB

TerenceKEANE_0-1713521381233.png
TerenceKEANE_0-1713521381233.png1459×700 154 KB

5

Thank you very much!

6

You’re most welcome! It was just a small thing for me :blush:

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. :wink:

Terence.