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（或者一個較小的寬度），也能夠達到一樣是效果。