大段文字的展示頁,特別是涉及到一定行數(shù)后要將其后內(nèi)容隱藏的情況(比如商品列表的簡(jiǎn)單詳情說明)許多新手容易忽略line-height的設(shè)置。導(dǎo)致做出來的頁面出現(xiàn)在不太的分辨率下下一行本該被隱藏的文字露出個(gè)頭的情況蹋笼。
解決這種問題只需要算好整內(nèi)容高度與行距高度就能解決。舉個(gè)例子驼唱,比如下圖:
我們可以將div的樣式寫為
{????
????width:186px;
????height:40px;//考慮到行高對(duì)其進(jìn)行了一定調(diào)整
????line-height:20px;//兩行設(shè)置行高為總高度的1/2劳殖,其他行數(shù)以此類推
????color:#282828;
????font-size:15px;
????overflow: hidden;
????text-overflow:ellipsis;
????display:-webkit-box;
????-webkit-line-clamp:2;
}
對(duì)于其他有外框高度要求的可用padding進(jìn)行調(diào)整。