周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 盛夏光年
  3. 正文

实现超出文本显示省略号

2022-08-07 94点热度 0人点赞 0条评论

一、应用场景

项目中文字描述过多,但是空间有限,常常需要对溢出文本使用省略号代替。

二、功能实现

1、单行文本

内容只显示一行,超过一行的文本都用省略号代替

div {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
2、多行文本

超过n行才显示省略号,相比单行较为复杂

div {
  width: 200px;
  word-break: break-all; /* 指定触碰到边界一律换行,哪怕是一个单词 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
三、注意事项
  • 有固定宽度
  • 超出盒子外隐藏内容
  • 单行省略必须指定不能换行
  • 多行的css设置只有-webkit内核才有作用
标签: css
最后更新:2022-10-13

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复
目录
  • 一、应用场景
  • 二、功能实现
    • 1、单行文本
    • 2、多行文本
    • 三、注意事项

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号