Truncate Text Using CSS and Display Ellipses...

This code is great for making products display all at the same height when you are showing lots on a page. It can keep everything in line nicely. Make sure that your title text displays the full content that you are truncating though for better SEO.

.truncate-ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

You can see this in use on the product titles in the image below.

Truncate Elipsis

Truncate Elipsis



Copyright © 2020 PromoMagic Ltd | +44 (0)1795859639 | This email address is being protected from spambots. You need JavaScript enabled to view it.

Registered in England and Wales Company Number: 11970723 -