CSS text goes beyond hidden and shows ellipsis

You can use overflow:hidden; to hide the excess,

Use text-overflow : ellipsis; When the text object overflows, it is displayed as an ellipsis.

Here is the ready-to-use code:

  1. Beyond a line, hide text and show ellipsis

//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2. Beyond two or more lines, hide the text and display ellipsis

//超出两行省略号
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

Guess you like

Origin blog.csdn.net/weixin_46324536/article/details/129160288