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;}}