Truncate text using CSS ellipsis

You might want to truncate a string of text, and you struggle with how to use the property ellipsis.
Here is an example of how you should use it. Note that all the following are mandatory. Your string has to be a straight line (that explains the white-space: nowrap). Its width has to be fixed and the overflow hidden.

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

More details about this property on this article from CSS-Tricks.