flex自適應寬度顯示省略號

text-overflow:ellipsis文本溢出顯示省略號，一般的搭配用法如下：

div{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space: nowrap;
 }

而想要在一定寬度內顯示省略號，必須還有一個固定的寬度，否則元素寬度會擴展至父級元素的寬度。但前不久碰到一個問題，希望實現如下布局：

希望左邊的圖片寬度固定，右邊寬度自適應，內容部分溢出顯示省略號。於是出現了難題：寬度需要自適應，但自適應就無法顯示省略號。首先，我們簡單看一下不考慮這個困難，我們一般會怎么寫：

<div id="wrap">
    <img alt="" id="left" src="img1.jpg">
    <div id="right">
        <p class="name">昵稱</p>
        <p class="content">內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號內容顯示省略號</p>
    </div>
</div>

#wrap {
    display: flex;
    border: 1px solid black;


}
#left {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ccc;
}
#right {
    flex: 1;
    background: yellow;
}
.content  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: red;
}

這時候表現如下：

（設置了背景色，以便更好的區分元素）

顯然，由於.content設置了white-space: nowrap;，因此內容就將父元素#right撐開，溢出了#wrap。停一下，想一想既然溢出是因為#right被撐開了，那給#right（即.content的父元素）設置overflow:hidden就可以防止.content將#right撐開，應該就能達到效果。試一下，果然達到了預期效果:

在網上查了一下，還可以給#right設置width:0（或者一個較小的寬度），也可以達到同樣是效果。