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.