由《CSS世界》中利用max-height屬性結(jié)合checkbox標(biāo)簽得到的啟發(fā)
先說明，該方案本身就不支持顯示指定行，但它對我后面實(shí)現(xiàn)該功能提供了方向，所以先帶大家看看張鑫旭大神是如何實(shí)現(xiàn) 僅利用CSS實(shí)現(xiàn)隱藏多余內(nèi)容，且展開收起支持動畫 的吧
html代碼：
<div class="box">
<input type="checkbox" id="showMoreOrLess">
<p class="content">該方案是摘抄自張鑫旭--《CSS世界》其具體實(shí)現(xiàn)是：將多余的文案放入另一個容器（more-content）中，</p>
<p class="more-content">
在初始化的時候，more-content設(shè)置max-height: 0; overflow: hidden; transition: max-height .3s;
點(diǎn)擊展開時，再配合checkbox的checked屬性，more-content設(shè)置max-height: ／*一個足夠大的最大高度值*／
</p>
<label for="showMoreOrLess" class="show-more">展開</label>
<label for="showMoreOrLess" class="show-less">收起</label>
</div>
class="more-content"的<p>標(biāo)簽里面放的就是初始要隱藏的內(nèi)容，可以看到，這里是需要將要隱藏的內(nèi)容和初始要展示的內(nèi)容分在兩個容器中放置的，我想這不是一個理想的方案，但是這不影響我們學(xué)習(xí)它，后面我會嘗試給出更好的方案。
checkbox用在這里是很巧妙的，CSS可以通過:checked屬性處理當(dāng)checkbox被勾選時的特定樣式，這里當(dāng)checkbox被勾選時，代表“展開”，取消勾選時，代表“隱藏”
接下來我們?yōu)閔tml設(shè)置一些樣式：
.box {
max-width: 300px;
margin: auto;
}
.show-less { //初始時隱藏該選項(xiàng)
display: none;
}
.show-more {
display: block;
}
input[type='checkbox'] {
opacity: 0;
}
給more-content設(shè)置的初始樣式是關(guān)鍵：
.more-content {
max-height: 0; //初始高度設(shè)置為0，約等于設(shè)置了display：none
overflow: hidden;
transition: max-height .5s;
}
好了，接下來是勾選了checkbox的樣式：
input[type='checkbox']:checked ~ .show-less {
display: block;
}
input[type='checkbox']:checked ~ .show-more {
display: none;
}
input[type='checkbox']:checked ~ .more-content {
max-height: 600px; ／*設(shè)置一個足夠大的最大高度*／
}
解釋一下代碼中的max-height: 600px, 這里的最大高度一定是要大于more-content的文案高度的，但它是“足夠大”不是“最大”，因?yàn)樘罅藙赢嬊袚Q會很奇怪。
可以看到，我們非常依賴兄弟選擇器~，如果你嘗試將<input type="checkbox" id="showMoreOrLess">移到more-content, show-more, show-less任何一個元素的后面，你會發(fā)現(xiàn)這個選擇器失效了。我對兄弟選擇器使用甚少，我想這個原因還是DOM樹的渲染順序問題吧。
我的想法：結(jié)合line-height做到指定行數(shù)
總結(jié)一下上面的方案還存在的問題：
將多余行的內(nèi)容放在了單獨(dú)的容器里，前端仍然需要通過JS切分外露的內(nèi)容和隱藏的內(nèi)容，而切分有一個很大的問題，就是只能切指定數(shù)量的字符，無法控制行數(shù)，同樣數(shù)量的字符，當(dāng)外部容器寬度不一樣、字體大小不一樣、字符類型不一樣（漢字、英文字母）等等，展示的行數(shù)都會不一樣的
我在《CSS世界》中看到了對line-height的介紹：
對于像文本這樣的純內(nèi)聯(lián)元素，
line-height就是高度計算的基石，比如，line-height設(shè)置為16px，則一行文字高度是16px，兩行就是32px，三行就是48px，所有瀏覽器渲染解析都是這個值，1像素都不會差。
既然都這么說了，那是不是只要我將文本的容器設(shè)置為內(nèi)聯(lián)元素，然后設(shè)置其line-height為某個值，設(shè)此時要求外露n行，那么外層容器的最大高度就是n * line-height，當(dāng)點(diǎn)擊“展開“時，再把它的最大高度設(shè)置為“一個足夠大的最大高度值”不就可以了嗎？這樣我也不用再有什么more-content的容器了，而且還能指定行數(shù)??！
html代碼：
<input type="checkbox" id="showMoreOrLess">
<div class="box">
<p class="content">該方案是摘抄自張鑫旭--《CSS世界》其具體實(shí)現(xiàn)是：將多余的文案放入另一個容器（more-content）中，
在初始化的時候，more-content設(shè)置max-height: 0; overflow: hidden; transition: max-height .3s;
點(diǎn)擊展開時，再配合checkbox的checked屬性，more-content設(shè)置max-height: ／*一個足夠大的最大高度值*／
</p>
</div>
<label for="showMoreOrLess" class="show-more">展開</label>
<label for="showMoreOrLess" class="show-less">收起</label>
CSS樣式：
.box {
max-width: 300px;
margin: auto;
max-height: 48px;
overflow: hidden;
transition: max-height .5s;
}
.content {
display: inline; /*很重要??！*/
line-height: 24px;
}
.show-less {
display: none;
}
.show-more {
display: block;
}
input[type='checkbox'] {
opacity: 0;
}
input[type='checkbox']:checked ~ .box .show-less {
display: block;
}
input[type='checkbox']:checked ~ .box .show-more {
display: none;
}
input[type='checkbox']:checked ~ .box {
max-height: 600px;
}
注意：一定不要忘記將p標(biāo)簽設(shè)置為display: inline; 讓它變成內(nèi)聯(lián)元素
這是我認(rèn)為一個比較方便且完美的實(shí)現(xiàn)多行文字的顯示與隱藏了，我在百度上搜索關(guān)鍵字，前面的文章全都是使用-webkit-line-clamp屬性的，這個屬性的兼容性嘛，看看吧：
大家酌情參考，是否可以直接用這個屬性吧。
另外:checked選擇器也有局限，第一是只能用于單選按鈕和復(fù)選框，第二是也有兼容性問題：
改用js動態(tài)添加類名也是一個不錯的選擇：
//html
<input type="checkbox" id="showMoreOrLess" onchange="showMoreOrLessChange()">
//js
var showMoreOrLess = document.getElementById('showMoreOrLess')
function showMoreOrLessChange() {
showMoreOrLess.setAttribute('class', showMoreOrLess.checked ? 'checked' : '')
}
關(guān)于line-height和font-size對內(nèi)聯(lián)元素高度的影響
其實(shí)我在看到line-height完全決定了像文本元素這種內(nèi)聯(lián)元素的高度時，就有所疑問了，在我的印象里，font-size同樣也會影響，所以我也做了一個實(shí)驗(yàn)，將font-size的值設(shè)置得比line-height更大，然后看效果
.content {
display: inline; /*很重要?。?/
line-height: 24px;
font-size: 30px;
}
發(fā)現(xiàn)文字會被截斷：
所以，使用這種方案時，一定要保證，font-size值比line-height小，否則顯示會有問題。
