How to crop text inside div with CSS?

To crop text inside div with CSS, we set the overflow property.

For instance, we write

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

to add white-space: nowrap; to keep all the text in 1 row.

Then we add overflow: hidden; to hide overflow text.

And we add text-overflow: ellipsis; to add ellipsis after the truncated text.