由《CSS世界》中利用max-height屬性結(jié)合checkbox標簽得到的啟發(fā)

先說明荆陆，該方案本身就不支持顯示指定行滩届，但它對我后面實現(xiàn)該功能提供了方向，所以先帶大家看看張鑫旭大神是如何實現(xiàn) 僅利用CSS實現(xiàn)隱藏多余內(nèi)容被啼，且展開收起支持動畫 的吧

html代碼：

    <div class="box">
        <input type="checkbox" id="showMoreOrLess">
        <p class="content">該方案是摘抄自張鑫旭--《CSS世界》其具體實現(xiàn)是：將多余的文案放入另一個容器（more-content）中帜消，</p>
        <p class="more-content">
            在初始化的時候，more-content設(shè)置max-height: 0; overflow: hidden; transition: max-height .3s;
            點擊展開時浓体，再配合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>標簽里面放的就是初始要隱藏的內(nèi)容，可以看到命浴，這里是需要將要隱藏的內(nèi)容和初始要展示的內(nèi)容分在兩個容器中放置的娄猫，我想這不是一個理想的方案，但是這不影響我們學習它生闲，后面我會嘗試給出更好的方案媳溺。
checkbox用在這里是很巧妙的，CSS可以通過:checked屬性處理當checkbox被勾選時的特定樣式碍讯，這里當checkbox被勾選時悬蔽，代表“展開”，取消勾選時捉兴，代表“隱藏”
接下來我們?yōu)閔tml設(shè)置一些樣式：

        .box {
            max-width: 300px; 
            margin: auto;
        }
        .show-less { //初始時隱藏該選項
            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的文案高度的，但它是“足夠大”不是“最大”难衰，因為太大了動畫切換會很奇怪钦无。

可以看到，我們非常依賴兄弟選擇器~盖袭，如果你嘗試將<input type="checkbox" id="showMoreOrLess">移到more-content, show-more, show-less任何一個元素的后面失暂，你會發(fā)現(xiàn)這個選擇器失效了。我對兄弟選擇器使用甚少鳄虱，我想這個原因還是DOM樹的渲染順序問題吧弟塞。

我的想法：結(jié)合line-height做到指定行數(shù)

總結(jié)一下上面的方案還存在的問題：

將多余行的內(nèi)容放在了單獨的容器里，前端仍然需要通過JS切分外露的內(nèi)容和隱藏的內(nèi)容拙已，而切分有一個很大的問題决记，就是只能切指定數(shù)量的字符，無法控制行數(shù)倍踪，同樣數(shù)量的字符系宫，當外部容器寬度不一樣、字體大小不一樣建车、字符類型不一樣（漢字扩借、英文字母）等等，展示的行數(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今艺，當點擊“展開“時，再把它的最大高度設(shè)置為“一個足夠大的最大高度值”不就可以了嗎爵卒？這樣我也不用再有什么more-content的容器了虚缎，而且還能指定行數(shù)！！
html代碼：

    <input type="checkbox" id="showMoreOrLess">
    <div class="box">
        <p class="content">該方案是摘抄自張鑫旭--《CSS世界》其具體實現(xiàn)是：將多余的文案放入另一個容器（more-content）中实牡，
        在初始化的時候陌僵，more-content設(shè)置max-height: 0; overflow: hidden; transition: max-height .3s;
            點擊展開時，再配合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標簽設(shè)置為display: inline; 讓它變成內(nèi)聯(lián)元素

這是我認為一個比較方便且完美的實現(xiàn)多行文字的顯示與隱藏了题涨，我在百度上搜索關(guān)鍵字偎谁，前面的文章全都是使用-webkit-line-clamp屬性的，這個屬性的兼容性嘛纲堵，看看吧：

-webkit-line-clamp兼容性

另外:checked選擇器也有局限席函，第一是只能用于單選按鈕和復選框铐望，第二是也有兼容性問題：

:checked的兼容問題

//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)元素高度的影響

其實我在看到line-height完全決定了像文本元素這種內(nèi)聯(lián)元素的高度時，就有所疑問了茂附，在我的印象里正蛙，font-size同樣也會影響，所以我也做了一個實驗何之，將font-size的值設(shè)置得比line-height更大跟畅，然后看效果

        .content {
            display: inline; /*很重要！溶推！*/
            line-height: 24px;
            font-size: 30px;
        }

發(fā)現(xiàn)文字會被截斷：

屏幕快照 2019-11-03 下午5.03.14.png