If CSS exceeds one line, it does not break the line, but displays the ellipsis


The text can be displayed in one line by using the text overflow and white space attributes, and if it is exceeded, an ellipsis will be added;

The necessary conditions are as follows:

  • Element must be hidden beyond( overflow:hidden; )
  • Force display on the same line (white space: nowrap;), do not break the line;
  • Ellipsis (text- overflow:ellipsis; )