您的位置:首页 > 代码 > HTML/CSS > CSS实现单行、多行文本溢出显示省略号(…)

CSS实现单行、多行文本溢出显示省略号(…)

admin 2020-12-12 23:43:59 237阅读 文本 溢出 省略号 单行 多行

CSS实现单行、多行文本溢出显示省略号(…)

单行文本时候:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;


多行文本时候:

display: -webkit-box;  //必须结合的属性,将对象作为弹性伸缩盒子模型显示
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical; //必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 2; //显示行数


发表评论
  • 点击这里
评论列表
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 1970-01-01
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,
    路人甲 1970-01-01
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    路人甲 1970-01-01
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复