Add ellipses to overflowing text and truncate the text using CSS

If you don't want text to wrap and occupy multiple lines, you can easily add ellipses to overflowing text and truncate the text into a single line. this is how to do it.

Add the following to the div containing the text.

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}