專案中發現，在flex佈局下，希望目標元素文字超出省略號時，text-overflow: ellipsis屬性無效，結論是設定文字超出省略號的元素，display屬性不能為flex！！！ display屬性不能為flex！！！display屬性不能為flex！！！設定成block或者inline都可以。

下面是模擬的demo：

.text-hide{
    border:1px solid red;
    display: flex;
    flex: 1;
}
.text-hide span{/**目標元素**/
    display:flex;/**這個才是重點**/
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
} 
 

 <div class="text-hide">
        <span>你再說些什麼東西。你再說些什麼東西。你再說些什麼東西。你再說些什麼東西。你再說些什麼東西。</span>     
 </div>

這種情況下無論怎麼設定屬性都無法生效，比如百度到的，設定父元素width: 0或者是overflow: hidden，都沒有效果。

去掉flex佈局屬性即可，也希望大家能發現更多的解決方式，求告知。