一、单行超出显示省略号
如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行;
详细步骤:
第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略)
第二步(溢出隐藏)overflow:hidden;
第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号)
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
二、多行超出显示省略号
对于内核是webkit的浏览器(Google/Safari),可以直接用CSS样式;
溢出隐藏:overflow: hidden;
省略号:text-overflow: ellipsis; display: -webkit-box;
弹性盒模型:
设置弹性盒子的子元素的排列方式 :-webkit-box-orient: vertical;
设置显示文本的行数:-webkit-line-clamp: 5; (最多显示5行)
1 2 3 4 5 | overflow : hidden ; text- overflow : ellipsis; display : -webkit-box;// -webkit-box-orient: vertical; -webkit-line-clamp: 5 ; |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?