問(wèn)題：

元素寬度100%，寬度會(huì)隨著瀏覽器縮放而變化。元素內(nèi)文本超過(guò)4行時(shí)顯示省略號(hào)，同時(shí)展示‘更多’按鈕，點(diǎn)擊更多按鈕展示全部文本。如下圖所示

超出四行顯示省略號(hào)(…)的代碼

.content{overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 4;display: -webkit-box;-webkit-box-orient: vertical;margin-bottom: 100px;
}

分析：

文本超出4行顯示省略號(hào)可以通過(guò)display box實(shí)現(xiàn)，但是超出后展示‘更多’按鈕不好處理，因?yàn)闊o(wú)法得知文本是否展示省略號(hào)。在行高固定20px的情況下，通過(guò)js獲取元素高度也可以計(jì)算出文本的行數(shù)，又因?yàn)閷挾葧?huì)跟隨瀏覽器寬度變化，所以需要監(jiān)聽resize事件，實(shí)時(shí)獲取元素高度，計(jì)算行數(shù)。這樣處理也可以滿足需求，只是太過(guò)復(fù)雜，而且在resize事件中實(shí)時(shí)獲取元素高度再計(jì)算，可能會(huì)卡頓。對(duì)于樣式問(wèn)題，盡可能的通過(guò)樣式來(lái)處理，下面介紹另一種實(shí)現(xiàn)方案。

解決方法：

html代碼

類名對(duì)應(yīng)的css代碼

.content{width: 100%;font-size: 26px;line-height: 40px;max-height: 160px;overflow: hidden;position: relative;
}
.virtual{position: absolute;top: -40px;left: 0px;right: 0;max-height: 200px;overflow: hidden;color: transparent;
}
.more{position: absolute;top: 160px;right: 0;font-size: 26px;cursor: pointer;background-color: white;color: #666;
}
.light{color: blue;
}

• content是用來(lái)展示的元素，最大高度80px（四行高度），超出隱藏。
• virtual是content的子元素，相對(duì)于content絕對(duì)定位，top為-20px（負(fù)一行高度），virtual內(nèi)的文本和content相同，寬度也和content相同，virtual字體透明不顯示，最大高度100px（五行高度），超出隱藏。
• more是更多按鈕，相對(duì)virtual絕對(duì)定位，top為80px（定位在more的第五行），背景白色（為了遮擋底部文本）。

所以：

1. content的內(nèi)容小于四行時(shí)，virtual的內(nèi)容小于四行，超出隱藏，more不展示
2. content的內(nèi)容到了第四行但未超出第四行時(shí)，virtual內(nèi)容小于五行，more不展示
3. content的內(nèi)容超出四行時(shí)，virtual內(nèi)容大于等于五行，more展示