Force text to use "..." if line breaks and do not shift images.

Hey there! I have the Blog Title and Blog Excerpt to show/hide on hover which works perfectly. The issue when the excerpt shows on hover if it requires two lines it shifts all the other posts below it down which I think looks bad.

Could someone help me determine the best way to prevent that shift from happening? One solution could be to force ellipsis if there is a line break.

/*Hide Excerpt*/
.blog-basic-grid article .blog-basic-grid--text {
  .blog-excerpt{
   display: none !important; 
  }
}
/*Hide Title and Show Excerpt*/
.blog-basic-grid article:hover .blog-basic-grid--text {
  .blog-title{
   display: none !important; 
  }
   .blog-excerpt{
   display: inherit !important;
  }
}

@tuanphan @Ziggy

Website is https://www.hyperset.studio/ and you can see the hover line shift on the Lummi entry.

Thank you @Ziggy!

Hello, I was wondering how to apply this to certain text blocks (all miscellaneous font) on mobile if they are in a page and not a blog post? I've built a page of images with descriptions underneath. On desktop they look great but on mobile I want an ellipsis instead of spilling into a second line. Thanks.

website: https://www.holidayst.com/south-pacific

password: bonvoyage

On 10/12/2023 at 1:02 AM, JulieChristina said:

Hello, I was wondering how to apply this to certain text blocks (all miscellaneous font) on mobile if they are in a page and not a blog post? I've built a page of images with descriptions underneath. On desktop they look great but on mobile I want an ellipsis instead of spilling into a second line. Thanks.

 

website: https://www.holidayst.com/south-pacific

password: bonvoyage

You mean all text under product images on this page?