css realizes that the text content exceeds the hidden, and the ellipsis is displayed

1. Single-line text: force the text not to wrap, and display an ellipsis for the excess

.text{
    
    
  width: 100%;
  height: 30px;
  line-height: 30px;
  overflow: hidden; /*超出隐藏*/
  white-space: nowrap;/*强制不换行*/
  text-overflow: ellipsis;/*隐藏后超出部分以省略号显示*/
}

2. Multi-line text: the number of lines and height can be customized, and ellipsis will be displayed for the excess part

.multi-line {
    
    
	max-height: 80px;/* 如需固定高度，请写直接写 height: 你需要的高度; */
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis; /* 超出文字显示省略号 */
	display: -webkit-box;
	-webkit-line-clamp: 2;/* 文本行数 */
	-webkit-box-orient: vertical;
}