span标签显示省略号

Jsky
2023-01-13 14:44:27
前端
css HTML

1：固定长度

span{
    overflow:hidden;
  width:120px;
  white-space:nowrap;
  text-overflow:ellipsis;/*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
}

2：不固定长度

检查一下是否设置了display: inline-block;需要去掉
span{
    overflow : hidden;
    text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
    display: -webkit-box; /*弹性伸缩盒子*/
    -webkit-box-orient: vertical; /*子元素垂直排列*/
    -webkit-line-clamp: 3; /*可以显示的行数，超出部分用...表示*/
}

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link