Add line break if text overflows onto 2 lines

Question

I have an E-Commerce website build in .liquid and HTML/CSS etc... On the collections/category page all my titles have different lengths (some go over 2 lines, some over 1 line).

The problem is that beneath the product title is a Colour swatch and price and review stars and i have 4 columns on a desktop. If the title is really long it knocks the swatch/price and review elements down a line and it doesnt look very pleasing.

Is there any way for the website to KNOW if the title is overflowing down a line and if it ISN'T then add a line break after the title. This way the swatchs/prices/reviews are always inline.

Here is a screenshot of my website and what I mean.

truncate is the best option, 2nd option you can do to add height for the title so particular space is always there. — VISHAL SINGH, Nov 11 '19 at 06:28
You would need javascript for this. CSS can't detect overflow or linebreaks. — Paulie_D, Nov 11 '19 at 11:43
Note - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Nov 11 '19 at 11:43

score 0 · Answer 1 · answered Nov 10 '19 at 18:37

0

You can also truncate title by setting a max-width and ellipsis overflow like this:

title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

answered Nov 10 '19 at 18:37

rajatgoyal715

71
1
6

That doesnt really work for this project as the whole title must be displayed as there are many products with similar names (V1 and V2 at the end) – LukeTerzich Nov 10 '19 at 21:29

Add line break if text overflows onto 2 lines

1 Answers1