Truncate title to only 2 lines

[Luxurymrkt]

 

Hi,

I want to have the product title that’s only 2 lines 

example 

PRADA 

green shoes with fur 

and raffia stitching …

my site is : https://y5gt67jqco4bw8ml-84365082931.shopifypreview.com

[DitalTek]

@Luxurymrkt 

To do this, you need to add css code to Online Store -> Theme -> Customize Code -> Assets -> custom.css

.product-card__info .product-title {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

[BSSCommerce-B2B]

Hi my friend @Luxurymrkt ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  .product-item__text.ta-c a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
   }
}

In this step, I make title only 2 line in mobile view.

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Vinsinfo · Accepted solution]

@Luxurymrkt Please follow below steps to truncate title to only 2 lines.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Locate "theme.css" file and paste the below code at the bottom of the file.

.product-item .product-item__inner .product-item__meta .product-item__product-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.