前端開發(fā)中,文章列表算是很常見的了,但是有很多時候,做列表開發(fā)也很無奈,比如當某條文章標題很長的時候,而我們的列表因為寬度有限,導(dǎo)致文章標題顯示不完整,就像這樣:
文章效果
html代碼
大家可以看到,列表中的標題都顯示的不完整,這樣的顯示效果并不友好,用戶無法知道這個標題是否是完整的,那么這個時候我們就可以給他改進一下,如果標題太長,就給它顯示省略號,這樣用戶就更有興趣點擊。
實現(xiàn)單行內(nèi)容溢出顯示省略號很簡單,只需要用 text-overflow:ellipsis 屬性即可:
css樣式
改善后的效果就是這樣:
謝謝你的閱讀,如果你有更好的方法或在應(yīng)用過程中遇到問題可以在評論區(qū)提問或者直接私信我,我會定期回復(fù),碼農(nóng)劉小橋與你一起學(xué)習,共同進步。
說css最常見的知識,實現(xiàn)單行、雙行文本溢出顯示省略號!如果實現(xiàn)單行文本的溢出顯示省略號同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來,當然還需要加寬度width屬來兼容部分瀏覽。
效果如下:
多行文本溢出顯示省略號的方法:
們先來看個例子,這個容器里有兩段文字和一張圖片,由于容器的高度小于包含內(nèi)容的總高度,不能顯示全部的內(nèi)容。此時,我們可以通過鼠標滾輪使容器的內(nèi)容上下滾動,來查看全貌。
這個效果是如何實現(xiàn)的呢?你一定想到的是 iframe!實際上,通過CSS的溢出樣式也能實現(xiàn)這個功能。
CSS 的 overflow 屬性,指定了當一個元素的內(nèi)容太大,無法容納在指定區(qū)域時,是否要裁剪內(nèi)容或添加滾動條。overflow 屬性有以下值:
visible - 默認。溢出的內(nèi)容沒有被剪掉。內(nèi)容會在元素的框外呈現(xiàn)。
hidden - 溢出的內(nèi)容被剪切,其余的內(nèi)容將不可見。
scroll - 溢出的內(nèi)容被剪掉了,并且增加了一個滾動條來查看其余的內(nèi)容。
auto - 類似于 scroll,但它只在必要時添加滾動條。
這是我已經(jīng)制作好的一個頁面。div 容器里包含三個段落,分別放置的是兩段文本和一張圖片。容器設(shè)置了背景顏色、內(nèi)填充和邊框。
在瀏覽器里預(yù)覽,內(nèi)容撐滿整個容器,全部顯示出來了。
接下來給外部的 div 容器添加 width: 50%、height: 300px 的樣式。
HTML
<div id="overflowTest">
<p>
國外某公司呢開發(fā)了一款自動找bug的AI程序,但是這個程序“悟道”了!AI“悟道”后解決bug的終極方案就是:沒有代碼就沒有bug,全刪!這是一個發(fā)生在美國的真實事件,美國版的大眾點評,本來想訓(xùn)練AI來消除bug,結(jié)果它把所有的內(nèi)容全部刪除了。來看看 軟件的更新介紹:
</p>
<p>
<img src="./image.jpeg" alt="" width="600">
</p>
<p>
大概意思就是:我們?yōu)楸局苁褂迷揳pp遇到問題的用戶致歉,我們訓(xùn)練了一個神經(jīng)網(wǎng)絡(luò),來消愁該app的漏洞,但它刪除了一切。還好這事發(fā)生在國外,要是在國內(nèi)的互聯(lián)網(wǎng)公司,這么大的安全事故,又要有一個工程師“祭天”了。
</p>
</div>
CSS
#overflowTest {
background: #4CAF50;
padding: 15px;
border: 1px solid #ccc;
}
我們看,容器的高度雖然小于內(nèi)容的總體高度,但是容器里的內(nèi)容還是全部顯示了。這說明瀏覽器在默認情況下, 對容器溢出的部分是完全顯示的。
回到 css 代碼,給 div 容器再添加樣式 overflow: visible。
效果是一樣的,說明 visible 是 overflow 屬性的默認值。
如果希望把溢出的部分隱藏,需要將 overflow 的值設(shè)置為 hidden(注意這個單詞讀 [?h?dn])。
果然,溢出的部分隱藏了,此時是無法看到隱藏的內(nèi)容的。
如果希望通過滾動條查看隱藏的內(nèi)容,需要將 overflow 的值設(shè)置為 scroll。
這樣,就可以通過滾動條來查看全部內(nèi)容了!
當然,也可以把 overflow 的值設(shè)置為 auto,此時和 scroll 效果一樣。
回到 css 代碼,我們將 div 容器的 width 修改為 30%。
看效果,水平和垂直方向都可以滾動了。
如果只希望某一個方向滾動,可以采用 overflow-x 和 overflow-y 兩個樣式屬性,它們指定是否只在水平方向或垂直方向上滾動。
比如,注釋掉 overflow: scroll ,添加樣式 overflow-y: scroll。
我們看,此時垂直方向可以滾動,可是水平方向也可以滾動,說明 overflow-y 只能約束垂直方向。
再添加樣式 overflow-x: hidden。
這回,水平方向就不能滾動了,只有垂直方向可以滾動!
有時,文字標題或文字內(nèi)容所在的容器空間有限,不能顯示全部內(nèi)容的時候,會出現(xiàn)一個省略號,示意讀者:內(nèi)容顯示不全,可以點擊查看詳細內(nèi)容。這個效果如何實現(xiàn)呢?
在 body 里添加一個 h1 元素,填入一些內(nèi)容。
在 css 文件里,定義選擇器 h1,聲明樣式 width: 310px,overflow: hidden,white-space: nowrap。讓文本在一行上顯示,并且溢出的部分隱藏。
很顯然,此時的效果用戶體驗不好——文字被剪切了。
回到 css 代碼,給 h1 再添加一個 text-overflow: ellipsis 樣式。ei 累鋪賽司
我們再看,效果實現(xiàn)了!
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。