【笔记】css实现单行超过width的内容以...代替，超过多行以...代替，flex布局下失效的解决方案

1、单行以...代替内容

width:100px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;

2、超过n行以...代替

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

-webkit-line-clamp的值就是限制的最大行数

3、flex布局下，以上css失效

可以在这个类的父级上面加上以下css

min-width: 0;