How to hide overflow characters of a div when resizing

Question

I have a few div elements, I want to hide overflow characters when div resizing like this

to this how to do this every time i resize page.

Can i do it from CSS?

Answer 1

Just add the following css to the div which contains the text:

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

This will simply add the three dots at the end of the line whenever the text is longer than the div.

Note: This works only for a 1 line text.