跳至正文

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;
标签: