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

Store Design
, , ,

Topic summary

Request: show an ellipsis for long product titles in the cart drawer, limited to two lines on a Shopify theme.

Solution: a CSS snippet added to base.css for .cart-item__name using -webkit-box, -webkit-line-clamp, -webkit-box-orient, and overflow: hidden to truncate text with an ellipsis. The provided example clamps to 1 line (-webkit-line-clamp: 1) but can be adjusted to 2 to match the request.

Steps given: Theme > Edit code > open base.css > paste the snippet.

Artifacts: two screenshots included to illustrate where to add the CSS; the code snippet is central to the fix.

Outcome: requester confirmed the fix worked; no further issues raised.

Status: resolved. The helper additionally promoted paid “Premium Coding Support,” SEO reports, animations, and consulting services; no commitments were made.

Summarized with AI on December 31. AI used: gpt-5.
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.

1 Like
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.