前端文本溢出隐藏问题

文本溢出隐藏问题

单行文本溢出隐藏

// 块级元素生效，不是块级的话可加display: block; 进行设置
.single_line {
    
    
	white-space:nowrap; // 超出容器宽度不换行
	overflow:hidden; // 超出容器部分隐藏
	text-overflow:ellipsis; // 溢出部分以...的形式展示
}

多行文本溢出隐藏

.multi_line {
    
    
    overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	-webkit-box-orient: vertical; /*设置对齐模式*/
  	-webkit-line-clamp: 2; /*设置多行的行数，示例为2行，如有需求可以设置显示多少行*/
}

小节：最好在全局样式文件引入，使用直接加类名就行，有需求查看具体内容可以通过配合element-ui的tooltip组件使用