Logo
技术 C#

CSS限制字数,超出部份显示点点点…

photo
Pastore Antonio

2022年06月15日

CSS限制字数,超出部份显示点点点…

最近项目中需要用CSS实现限制字数,超出部份显示点点点…,只需要几行代码即可:

width:400px;/*要显示文字的宽度*/
text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
white-space :nowrap; /*让文字不换行*/
overflow : hidden; /*超出要隐藏

一行内超出点点点

overflow:hidden; /*超出的部分隐藏起来。*/ 
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */

超出两行显示点点点

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
word-break: break-all;  // 注意这个文字多行很重要
-webkit-box-orient: vertical;

 

本文为原创文章,请注意保留出处!
修复群晖Synology Drive client右键菜单缺失问题 Local, clean & environmental 作者:Pastore Antonio
1806 浏览量
1780 浏览量
configure: error: Package requirements (oniguruma) were not met Local, clean & environmental 作者:Pastore Antonio
1525 浏览量
Adobe Acrobat Pro 激活 Local, clean & environmental 作者:Pastore Antonio
1520 浏览量
追寻日出,找回自己 Local, clean & environmental 作者:Pastore Antonio
1489 浏览量