软件开发中CSS限制字数或行数,超出部份显示点点点...省略号的前端程序开发实现

日常在软件开发过程中，我们显示文本时候都是需要不能超出，超出后显示省略号，比如文章标题一行显示多少字超出显示省略号，或者文摘要显示两行超出的显示省略号的最常见需求，此记录分享之。

一、一行内超出显示省略号点点点

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

二、多行（根据项目UI设计需要，此示例2行）超出显示点点点

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

此处完成，具体是需要加一个div的宽度控制就ok

了念博客

CSS限制字数或行数,超出部份显示点点点...省略号