Add dots if text is too long

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

  padding: 10px;
  border: 1px solid #ccc;
}

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped , display an ellipsis ('…'), or display a custom string.

The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space . 

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).