单行省略
代码:
width: 200px; /* 限制容器宽度 */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出范围的内容 */
text-overflow: ellipsis; /* 使用省略号 */
多行省略
1.-webkit-box 和 -webkit-box-orient 属性将容器元素设置为一个垂直方向的弹性盒子,并指定了最多显示几行文本;
2.overflow: hidden 来隐藏超出容器高度的文本;
3.text-overflow: ellipsis 来在文本溢出时显示省略号;
代码:
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; /*限制显示的文本行数*/
line-clamp: 2; /*兼容*/
-webkit-box-orient: vertical;