为什么我的text-overflow无效？

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

限制一股宽度 这样写试一试

/* 文本超出一行省略 */
.overflow-ellipsis {
    display: block; 
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 文本超出显示省略 */
  white-space: nowrap; /* 内容不换行 */
}

/* 文本超出多行显示省略 如两行 */
.overflow-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2指超过两行就显示省略号，以此类推 */
  -webkit-box-orient: vertical;
}

再将你要的class名放在所对应的标签class上

必须有 overflow:hidden

没加overflow: hidden; 指定多行显示省略号必须加-webkit-line-clamp: 3