css行内省略号、垂直居中
应用场景分析:
一、当你的文字限定行数,超出部分的文字用省略号显示。
(有两个使用场景:1、单行 2、多行)
// 单行 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
// 多行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
二、当你的高度不定要垂直居中时,这里我们用盒模型布局。
(这里要对盒模型做兼容性处理,不然有些手机系统不兼容的。切记~~~~~~~)
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ justify-content: center; align-items: center;
有些属性不懂的,可以接着看。懂的到这里就ok了:
1 | justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
1 | align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!