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