随笔 - 83  文章 - 1 评论 - 24 阅读 - 23129
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

一、单行超出显示省略号
如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行;

详细步骤:

第一步(不换行):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;

  

posted on   是程序喵哇  阅读(608)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示