6月15日

CSS 指定行数溢出省略号（最常用）

1. 单行溢出省略号
   .text{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   }
2. 多行溢出省略号（指定行数，通用）
   /* 显示2行 /
   .text{
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; / 改数字就是几行 */
   -webkit-box-orient: vertical;
   }
   -webkit-line-clamp: 3; 代表显示 3 行
3. 必加宽高
   一定要给盒子设置宽度，否则不生效
   .text{
   width: 300px;
   line-height: 1.5; /* 行高更美观 */
   }
   总结
   单行：nowrap + hidden + ellipsis
   多行：-webkit-line-clamp: 行数