CSS实现文本超出部分显示省略号

By | 2020年5月22日

在做前端项目时,时常会遇到单行文本过长,而将样式撑开,或者自动换行;当需要不自动换行或不让其将样式撑开的时候,就需要用到将多余字符隐藏起来,或者显示省略号:

/**css样式实例 单行超出部分显示省略号**/
p{
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/**css样式实例 自定义多行超出部分显示省略号**/
div{
  overflow: hidden;      
  text-overflow: ellipsis;      
  display: -webkit-box;  
  -webkit-line-clamp: 3; /* 控制最多显示几行 */  
  -webkit-box-orient: vertical;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注