Recently I have been working on a project and I came across an issue where I have to display ‘Featured products’ in 4 columns with a ‘Read more…’ link at the end of each product details. The number of lines for these 4 columns were not equal and so was not looking clean. To demonstrate, I will take the following example where we have 3 panels/columns with unequal height (live demo):
I wrote a small jQuery plugin (only 696 bytes) to achieve 2 main goals:
- Make these panels of equal height by identifying the smallest height among these panels and than reduce the text in other panels to make it of equal height to the smallest.
- and add an option to put three dots at the end of the paragraph if its not ending with a full stop.