景

在我們寫需求時可能會遇到類似于這樣的多行文本展開與收起的場景：

那么，如何通過純css實現這樣的效果呢？

實現的難點

（1）位于多行文本右下角的 展開收起按鈕。

（2）展開和收起兩種狀態的切換。

（3）文本不超過指定行數時不展示 展開收起按鈕。

一、位于右下角的“展開收起”按鈕

多行文本截斷

假設有這樣一個結構：

<div className="text">
    銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，
</div>

多行文本超出省略，主要用到用到 line-clamp，關鍵樣式如下：

.text {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

右下角環繞效果

下面放一個按鈕，然后設置浮動，可以使文本環繞按鈕，在通過一個 margin-top 可以使按鈕移動到右下角

<div className="text">
    <button className="btn">展開</button>
    銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀
</div>
<style>
.btn｛
    float:right；
    margin-top:50px；
}
</style>

可以看到，雖然按鈕到了右下角，但是文本卻沒有環繞按鈕上方的空間，空出了一大截

此時我們可以通過多個浮動元素進行調整，這里用偽元素 ::before 來代替

<style>
.text：before{
    content:'';
    float:right;
    width:10px;
    height:58px;/*先隨便設置一個高度*/
    background:red
}
</style>

通過清除浮動使偽元素位于按鈕的上方

<style>
.btn{
    float:right;
    clear:both;
}
</style>

可以看到，現在文本是完全環繞在右側的兩個浮動元素了，只要把紅色背景的偽元素寬度設置為0（或者不設置寬度，默認就是 0），就實現了右下角環繞的效果

<style>
.text：before{
    content:'';
    float:right;
    width:0;/*設置為0，或者不設置寬度*/
    height: 50px;/*先隨便設置一個高度*/
}
</style>

動態高度

上面雖然完成了右下加環繞，但是高度是固定的，如何動態設置呢？

這里可以用到 calc 計算，用整個容器高度減去按鈕的高度即可，如下:

<style>
.text：before{
    content:'';
    float:right;
    width:0;/*設置為0，或者不設置寬度*/
    height: calc(100% - 24px);/*先隨便設置一個高度*/
}
</style>

很可惜，好像并沒有什么效果，打開控制臺看看，結果發現 calc(100% - 24px) 計算高度為 0

原因就是高度 100% 失效的問題，關于這類問題網上的分析有很多

通常的解決方式是給父級指定一個高度，但是這里的高度是動態變化的，而且還有展開狀態，高度更是不可預知，所以設置高度不可取。

除此之外，其實還有另一種方式，那就是利用 flex 布局。

因此，這里需要給 .text 包裹一層，然后設置 display: flex

<div className="wrap">
    <div className="text">
        <button className="btn">展開</button>
        銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀
    </div>
</div>
<style>
.wrap{
    display :flex;
}
</style>

這樣下來，剛才的計算高度就生效了，改變文本的行數，同樣位于右下角

二、“展開”和“收起”兩種狀態

CSS 狀態切換，需要用到 input type="checkbox"。

我們首先加一個 input，然后把之前的 button 換成 label ，并且通過 for 屬性關聯起來。

注意！在 jsx 語法中 for 屬性要寫成 htmlFor

<div className="wrap">
    <input type="checkbox" id="exp">
    <div className="text">
        <label className="btn" htmlFor="exp">展開</label>
        銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀，銀泰百貨，銀
    </div>
</div>

這樣，在點擊 label 的時候，實際上是點擊了 input 元素

現在來添加兩種狀態，分別是只顯示 2 行和不做行數限制

<style>
.exp:checked+.text{
    -webkit-line-clamp: 999; /* 設置一個足夠大的行數即可 */
}
</style>

兼容版本可以直接設置最大高度 max-height 為一個較大的值，或者直接設置為 none。

<style>
.exp:checked+.text{
    max-height:none;
}
</style>

展開 按鈕在點擊后應該變成 收起 ,使用 偽類 content 生成技術

具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

<label class="btn" for="exp"></label> <!-- 去除按鈕文字 -->

<style>
.btn::after{
    content:"展開"; /* 采用content 生成 */
}
</style>

添加 .checked 狀態

<style>
.exp:checked+.text .btn::after{
    content:"收起";
}
</style>

三、文本行數的判斷

當文本較少時，此時是沒有發生截斷，需要隱藏展開按鈕，CSS 是沒有這類邏輯判斷

大多數我們都需要從別的角度，采用 “障眼法” 來實現

在文本末尾添加一個元素，為了不影響原有布局，這里設置了絕對定位，這里用 .text::after 偽元素來代替

把剛才這個元素設置一個足夠大的尺寸，比如 100% * 100%

<style>
.text::after{
    content: ' ';
    width:100%;
    height:100%;
    position: absolute;
    background: #fff;
}
</style>

那么如果此時文本沒有截斷，這個元素會把按鈕覆蓋掉，如果有截斷，這個元素會往下移，就不會覆蓋按鈕

點擊展開后按鈕丟失，無法收起

此時，我們可以添加一下:checked狀態即可，在展開時隱藏覆蓋層

<style>
.exp:checked+.text::after{
    visibility:hidden;
}
</style>

這樣，就實現了在文字較少的情況下隱藏展開按鈕的功能

SS圓形展開菜單。

·1.設置開關狀態為checked時子菜單的展開收縮動畫。

·2.設置開關狀態為checked時子菜單的展開收縮動畫。

·3.設置開關狀態為checked時子菜單的展開收縮動畫。

·4.重置開關細節樣式。

·5.添加子菜單的詳細樣式。

·6.設置開關狀態為checked時子菜單的展開收縮動畫。

·7.設置開關狀態為checked時子菜單的展開收縮動畫。