其實(shí)有時(shí)候很煩躁，各種需求疊加士嚎，又要各種各樣效果很難綜合呜魄。
可不是嗎烁焙？前段時(shí)間一直在開(kāi)發(fā)前端的東西，網(wǎng)頁(yè)上還好無(wú)非就是些各種瀏覽器之間的兼容適配耕赘〗居可最近小程序項(xiàng)目較緊張，又不得不抽時(shí)間搞小程序這一塊操骡。以前對(duì)于這種需求記不太牢就直接谷歌或百度了九火，用了就忘，忘了就再次搜索册招，其實(shí)仔細(xì)理一理還是蠻有意思岔激。
看段css代碼：
.sug_info{
border-bottom: 1rpx solid #ebebeb;
height: 90rpx;
line-height: 90rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
我在小程序控制臺(tái)Wxml選項(xiàng)下做樣式調(diào)試，末尾三行是我百度的結(jié)果是掰，超出控件的內(nèi)容顯示“...”效果的代碼
讓我們?cè)囋囈恍幸恍腥∠纯瓷缎Ч?br>
（隔了有半小時(shí)吧...）
整了好幾張圖虑鼎，本來(lái)PS使用就不怎么6，湊合整了幾張能看的圖片準(zhǔn)備上傳上來(lái)的键痛，但是呢炫彩？簡(jiǎn)書(shū)不知道怎么就抽風(fēng)了，傳不上來(lái)絮短！只能口頭描述一番了江兢。
1.如果不加末尾三行，控件內(nèi)容過(guò)長(zhǎng)就會(huì)出現(xiàn)換行丁频，而且會(huì)換到下一行內(nèi)容內(nèi)杉允，就重疊了
2.只添加white-space: nowrap;
不換行了不假，但是內(nèi)容會(huì)超出屏幕外
3.添加white-space: nowrap;overflow: hidden;
效果是：不換行席里，內(nèi)容也不會(huì)超出屏幕外叔磷，但是沒(méi)有'...'效果
4.三行都添加，效果就正常了奖磁「幕可見(jiàn)text-overflow: ellipsis;是關(guān)鍵點(diǎn)。
最后加上這段代碼即可
.sug_info{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
總結(jié)：
都是非常簡(jiǎn)單的css小知識(shí)署穗，天天用也經(jīng)常用寥裂，但是有時(shí)候覺(jué)著這也太簡(jiǎn)單了嵌洼，就沒(méi)有真正去深入想想每一行代碼具體是干什么的案疲。像今天這么一點(diǎn)一點(diǎn)去調(diào)去試，就會(huì)明白零零碎碎的小東西去弄清楚了也是件很開(kāi)心的事兒麻养。
