flex自适应宽度显示省略号
生活随笔
收集整理的這篇文章主要介紹了
flex自适应宽度显示省略号
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
text-overflow:ellipsis文本溢出顯示省略號(hào)，一般的搭配用法如下：
div{
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
}
而想要在一定寬度內(nèi)顯示省略號(hào)，必須還有一個(gè)固定的寬度，否則元素寬度會(huì)擴(kuò)展至父級(jí)元素的寬度。但前不久碰到一個(gè)問題，希望實(shí)現(xiàn)如下布局：
希望左邊的圖片寬度固定，右邊寬度自適應(yīng)，內(nèi)容部分溢出顯示省略號(hào)。于是出現(xiàn)了難題：寬度需要自適應(yīng)，但自適應(yīng)就無法顯示省略號(hào)。首先，我們簡(jiǎn)單看一下不考慮這個(gè)困難，我們一般會(huì)怎么寫：
<div id="wrap">
<img alt="" id="left" src="img1.jpg">
<div id="right">
<p class="name">昵稱</p>
<p class="content">內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)內(nèi)容顯示省略號(hào)</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;
}
這時(shí)候表現(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（或者一個(gè)較小的寬度），也可以達(dá)到同樣是效果。
總結(jié)
以上是生活随笔為你收集整理的flex自适应宽度显示省略号的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库中的几个概念 - LGWR, AR
- 下一篇： Shiro授权流程