If you have some text in a set width element you can use the following property to truncate the text with an ellipsis (...).

You need is a fixed width element, and then some text that is wider than the element. 

Text Overflow

text-overflow: ellipsis;    

You also need to set a few more things for this overflow to work correctly. 

White Space and Overflow

You need to tell the white-space to nowrap! and also the overflow needs to be hidden.

  white-space: nowrap;
  overflow: hidden;

Width of the element

The element needs a width that is less than the length of the text, otherwise it has nothing to overflow.

width: 180px;