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

先說(shuō)明，該方案本身就不支持顯示指定行，但它對(duì)我后面實(shí)現(xiàn)該功能提供了方向，所以先帶大家看看張?chǎng)涡翊笊袷侨绾螌?shí)現(xiàn) 僅利用CSS實(shí)現(xiàn)隱藏多余內(nèi)容，且展開(kāi)收起支持動(dòng)畫(huà) 的吧

html代碼：

    <div class="box">
        <input type="checkbox" id="showMoreOrLess">
        <p class="content">該方案是摘抄自張?chǎng)涡?-《CSS世界》其具體實(shí)現(xiàn)是：將多余的文案放入另一個(gè)容器（more-content）中，</p>
        <p class="more-content">
            在初始化的時(shí)候，more-content設(shè)置max-height: 0; overflow: hidden; transition: max-height .3s;
            點(diǎn)擊展開(kāi)時(shí)，再配合checkbox的checked屬性，more-content設(shè)置max-height: ／*一個(gè)足夠大的最大高度值*／
        </p>
        <label for="showMoreOrLess" class="show-more">展開(kāi)</label>
        <label for="showMoreOrLess" class="show-less">收起</label>
    </div>

class="more-content"的<p>標(biāo)簽里面放的就是初始要隱藏的內(nèi)容，可以看到，這里是需要將要隱藏的內(nèi)容和初始要展示的內(nèi)容分在兩個(gè)容器中放置的，我想這不是一個(gè)理想的方案，但是這不影響我們學(xué)習(xí)它，后面我會(huì)嘗試給出更好的方案。
checkbox用在這里是很巧妙的，CSS可以通過(guò):checked屬性處理當(dāng)checkbox被勾選時(shí)的特定樣式，這里當(dāng)checkbox被勾選時(shí)，代表“展開(kāi)”，取消勾選時(shí)，代表“隱藏”
接下來(lái)我們?yōu)閔tml設(shè)置一些樣式：

        .box {
            max-width: 300px; 
            margin: auto;
        }
        .show-less { //初始時(shí)隱藏該選項(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;
        }

好了，接下來(lái)是勾選了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è)置一個(gè)足夠大的最大高度*／
        }

解釋一下代碼中的max-height: 600px, 這里的最大高度一定是要大于more-content的文案高度的，但它是“足夠大”不是“最大”，因?yàn)樘罅藙?dòng)畫(huà)切換會(huì)很奇怪。

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

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

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

將多余行的內(nèi)容放在了單獨(dú)的容器里，前端仍然需要通過(guò)JS切分外露的內(nèi)容和隱藏的內(nèi)容，而切分有一個(gè)很大的問(wèn)題，就是只能切指定數(shù)量的字符，無(wú)法控制行數(shù)，同樣數(shù)量的字符，當(dāng)外部容器寬度不一樣、字體大小不一樣、字符類型不一樣（漢字、英文字母）等等，展示的行數(shù)都會(huì)不一樣的

我在《CSS世界》中看到了對(duì)line-height的介紹：

對(duì)于像文本這樣的純內(nèi)聯(lián)元素，line-height就是高度計(jì)算的基石，比如，line-height設(shè)置為16px，則一行文字高度是16px，兩行就是32px，三行就是48px，所有瀏覽器渲染解析都是這個(gè)值，1像素都不會(huì)差。

既然都這么說(shuō)了，那是不是只要我將文本的容器設(shè)置為內(nèi)聯(lián)元素，然后設(shè)置其line-height為某個(gè)值，設(shè)此時(shí)要求外露n行，那么外層容器的最大高度就是n * line-height，當(dāng)點(diǎn)擊“展開(kāi)“時(shí)，再把它的最大高度設(shè)置為“一個(gè)足夠大的最大高度值”不就可以了嗎？這樣我也不用再有什么more-content的容器了，而且還能指定行數(shù)?。?br> html代碼：

    <input type="checkbox" id="showMoreOrLess">
    <div class="box">
        <p class="content">該方案是摘抄自張?chǎng)涡?-《CSS世界》其具體實(shí)現(xiàn)是：將多余的文案放入另一個(gè)容器（more-content）中，
        在初始化的時(shí)候，more-content設(shè)置max-height: 0; overflow: hidden; transition: max-height .3s;
            點(diǎn)擊展開(kāi)時(shí)，再配合checkbox的checked屬性，more-content設(shè)置max-height: ／*一個(gè)足夠大的最大高度值*／
        </p>
    </div>
    <label for="showMoreOrLess" class="show-more">展開(kāi)</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)為一個(gè)比較方便且完美的實(shí)現(xiàn)多行文字的顯示與隱藏了，我在百度上搜索關(guān)鍵字，前面的文章全都是使用-webkit-line-clamp屬性的，這個(gè)屬性的兼容性嘛，看看吧：

-webkit-line-clamp兼容性

另外:checked選擇器也有局限，第一是只能用于單選按鈕和復(fù)選框，第二是也有兼容性問(wèn)題：

:checked的兼容問(wèn)題

//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對(duì)內(nèi)聯(lián)元素高度的影響

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

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

發(fā)現(xiàn)文字會(huì)被截?cái)啵?br>

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