• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

qdyzhuang

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

文本溢出显示....

单行文本
  1. overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
  2.  white-space: nowrap;(设置文字在一行显示,不能换行
  3.  text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)
     
    多行文本

    -webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。为了实现该效果,它需要组合其他的 WebKit 属性)
    display: -webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )
    -webkit-box-orient: vertical;(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )
    overflow: hidden;(文本溢出限定的宽度就隐藏内容)
    text-overflow: ellipsis;(多行文本的情况下,用省略号 “…” 隐藏溢出范围的文本)

    word-break: break-all; //纯英文、数字、中文

posted on 2022-11-29 19:44  溪陌上的树  阅读(30)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3