flex布局文字溢出显示省略号失效的解决方法

css单行文字溢出省略：

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

css多行文字溢出省略：

  word-break: break-word;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   width: 100px;

但是如果是flex布局，省略就会不起作用：

<div class="name">我超出不能显示省略号</div>
.name {
 display: flex;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 100px;
}

其实只要为文字套上一层span问题就迎刃而解啦

<div class="name">
  <span>我超出可以显示省略号</span>
</div>
.name {
 display: flex;
   & span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100px;
   }
}