Does someone know how to Truncate product titles on featured collection ?

[Rauf]

Hi, I would like to truncate the product titles in featured collection so that the titles that are longer than one line end with "...".  any suggestions would be greatly appreciated. Thanks !

[codewithpaul]

Hey mate!

Yup pretty simple to do with some css.

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Great article there showing how to do it (presuming you know how to add css to the theme)

[Rauf]

 

[Rauf]

Hi, thanks for the reply. Thats the problem Im new the coding and know very little. Ive tried first to add 

.card__heading { width: 100%; white-space: nowrap; overflow: hidden;

text-overflow: ellipsis; font-size: 0.8em; }

without succes.

i now tried adding the code on the page you provided 

h1 {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  padding: 20px;
  font-size: 1.3rem;
  margin: 0;
  background: white;
  resize: horizontal;
} 
and
.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

but it shows as in the screenshot. 

[Rauf]

I added this to base.css file. if you have any ideas please let me know

[GemPages]

Hello @Rauf 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your product-card-grid file
3. Paste the below code :

  | truncate: 10

(replace 10 with the number which you want )

Like this :  https://prnt.sc/MN5WfMfQ19zL

Code: 

<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate: 10 }}</div>

I hope the above is useful to you.
Best regards,
GemPages Support Team

[Rauf]

Hi, thank you for your reply. I would like a code that adapts to the size of the container instead of a fixed number of letters, So that it works for mobile, desktop and other devices. If you have any ideas please let me know. Thank you.

[codewithpaul]

Hey Rauf,

I don't know how comfortable you are adding code but i created the below codepen that will add ellipses to the text based on container size (resize the window on the below codepen to see)

https://codepen.io/PaulRyan17/pen/JjajJyE 

[Rauf]

Hi, thanks a lot for your message. Unfortunately I just began with the coding. I imagine the css must be added in base.css file and replace box with card__heading? and Html in another file? If you can tell me exactly it would be with pleasure. (Its on Dawn theme) thanks a lot

[codewithpaul]

can you link me your store as I have no idea what class needs to be targeted, I don't have the dawn theme locally/

[Rauf]

https://glamourgoddesss.myshopify.com/ thanks, for the moment I added 

.full-unstyled-link {
width: 50vw;
border: 1px solid red;
height: 150px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

I tried with .card and .card__heading but I can't manage to have the code adapt to the size of the container. when the title is longer, it goes out of the container.

[codewithpaul]

sorry the `width: 50vw` and `height:150px` was just an example, the old code you need to put in is 

```

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

```

[Rauf]

I have already tried this code with .card and .card__heading added in base.css, but for some reason the text continues on 1 line and goes out of the container. Do you know if this feature is complicated and requires a bit more complicated coding? (having "..." at the end ot the the container if the text is longer than 1 line, without a max width so that it adapts to the size of the container and works on all devices. I have been trying since yesterday and it seems that something is not making it possible or maybe I am missing something.

[Rauf]

.card {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} 

with this code, the only problem is I don't see the "..." at the end of the container for the titles that are longer. Is it normal? Is a width needed to be added or can it be done in a way that the width adapts to the container so it works directly for mobile and desktop? If you have any idea what is the best solution please let me know. Otherwise I'll check to hire someone, thanks

[Rauf]

Ok I finally found the solution it was much easier than I fought. For anyone having the same problem here's how it worked for me 

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

[Memo17]

Hello Rauf,

I currently have the same challenge as you had above and I have a question regarding your solution: Where did you add the following code:         

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

I am looking forward for your reply!