css实现文本内容超出隐藏,显示省略号

1. 单行文本：强制文本不进行换行，超出部分显示省略号

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

2. 多行文本：行数、高度自定，超出部分显示省略号

.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;
}