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

Time:2020-6-29

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; )