前端 CSS 经典：省略号

1. 单行省略

1. .ellipsis {
2.   overflow: hidden;
3.   white-space: nowrap;
4.   text-overflow: ellipsis;
5. }

复制代码

2. 双行省略（webkit 内核）

1. .ellipsis {
2.   display: -webkit-box; /* 显示多行文本容器 */
3.   -webkit-box-orient: vertical;
4.   -webkit-line-clamp: 2; /*显示行数*/
5.   overflow: hidden; /*隐藏多出部分文字*/
6.   text-overflow: ellipsis; /*用省略号代替多出部分文字*/
7. }

复制代码

3. 通用省略

1. .ellipsis {
2.   position: relative;
3.   line-height: 1.4em;
4.   height: 2.8em; /* 这里的高度是line-height的两倍 */
5.   overflow: hidden;
6. }
7. .ellipsis::after {
8.   content: "...";
9.   position: absolute;
10.   bottom: 0;
11.   right: 0;
12.   padding: 0 5px 1px 30px;
13.   background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%) repeat
14.     scroll 0 0 rgba(0, 0, 0, 0);
15. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。