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

div{

  text-overflow:ellipsis;

  overflow:hidden;

  white-space: nowrap;

 }

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

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

<div id="wrap">

    <img alt="" id="left" src="img1.jpg">

    <div id="right">

        <p class="name">昵稱</p>

        <p class="content">內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號內(nèi)容顯示省略號</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;

}

這時候表現(xiàn)如下：

（設(shè)置了背景色，以便更好的區(qū)分元素）

顯然，由于.content設(shè)置了white-space: nowrap;，因此內(nèi)容就將父元素#right撐開，溢出了#wrap。停一下，想一想既然溢出是因?yàn)?right被撐開了，那給#right（即.content的父元素）設(shè)置overflow:hidden就可以防止.content將#right撐開，應(yīng)該就能達(dá)到效果。試一下，果然達(dá)到了預(yù)期效果:

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

總結(jié)

以上是生活随笔為你收集整理的flex自适应宽度显示省略号的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。