Chrisdesotto of Archived Theme Support
8/14/2018 - 12:36 PM

Truncate product card grid titles using ellipses.

Truncate long product titles on product card grids using line-clamp for any theme. This snippet will truncate titles onto two lines. Works with any number of lines as well, just adjust -webkit-line-clamp to have a value of 3, or 4, or even 1 instead.

Make sure to change the class name in the gist below to the one that is specific to the theme you're working on. .grid-view-item__title is specific to Debut, so if you attempt to pop that into Supply you'll get unexpected results!

screen.md
content_copyfile_download
  • Rendered
  • Source

truncate.md
content_copyfile_download
  • Rendered
  • Source
.grid-view-item__title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}