CSS 實現多行文本“展開收起”

行文本展開收起是一個很常見的交互，如下圖演示

實現這一類布局和交互難點主要有以下幾點

位于多行文本右下角的“展開收起”按鈕
“展開”和“收起”兩種狀態的切換
當文本不超過指定行數時，不顯示“展開收起”按鈕

說實話，之前單獨看這個布局，即使借助 JavaScript 也不是一件容易的事啊（需要計算文字寬度動態截取文本，vue-clamp 就是這么做的），更別說下面的交互和判斷邏輯了，不過經過我的一番琢磨，其實純 CSS 也能完美實現的，下面就一步一步來看看如何實現吧~

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

很多設計同學都喜歡這樣的設計，把按鈕放在右下角，和文本混合在一起，而不是單獨一行，視覺上可能更加舒適美觀。先看看多行文本截斷吧，這個比較簡單

多行文本截斷

假設有這樣一個 html 結構

<div class="text">
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

多行文本超出省略大家應該很熟悉這個了吧，主要用到用到 line-clamp ，關鍵樣式如下

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

右下角環繞效果

提到文本環繞效果，一般能想到 浮動 float ，沒錯，千萬不要以為浮動已經是過去式了，具體的場景還是很有用的。比如下面放一個按鈕，然后設置浮動

<div class="text">
  <button class="btn">展開</button>
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

.btn {
  float: left;
  /*其他裝飾樣式*/
}

如果設置右浮動

.btn {
  float: right;
  /*其他裝飾樣式*/
}

這時已經有了環繞的效果了，只是位于右上角，如何將按鈕移到右下角呢？先嘗試一下 margin

.btn {
  float: right;
  margin-top: 50px;
  /*其他裝飾樣式*/
}

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

雖然 margin 不能解決問題，但是整個文本還是受到了浮動按鈕的影響，如果有多個浮動元素會怎么樣呢？這里用偽元素來 ::before 代替

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

現在按鈕到了偽元素的左側，如何移到下面呢？很簡單，清除一下浮動 clear: both; 就可以了

.btn {
  float: right;
  clear: both;
  /*其他裝飾樣式*/
}

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

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

動態高度

上面雖然完成了右下加環繞，但是高度是固定的，如何動態設置呢？這里可以用到 calc 計算，用整個容器高度減去按鈕的高度即可，如下

.text::before{
  content: '';
  float: right;
  width: 0;
  height: calc(100% - 24px);
}

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

原因其實很容易想到，就是 高度 100% 失效 的問題，關于這類問題網上的分析有很多，通常的解決方式是給父級指定一個高度，但是這里的高度是動態變化的，而且還有展開狀態，高度更是不可預知，所以設置高度不可取。

除此之外，其實還有另一種方式，那就是利用 flex 布局。大概的方法就是在 flex 布局的子項中，可以通過百分比來計算變化高度，具體可參考 w3.org 中關于 css-flexbox 的描述

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

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

<div class="wrap">
  <div class="text">
    <button class="btn">展開</button>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

.wrap{
  display: flex;
}

實踐下來，display: grid 和 display: -webkit-box 同樣有效，原理類似

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

除此之外，動態高度也可以采用負的 margin 來實現（性能會比 calc 略好一點）

.text::before{
  content: '';
  float: right;
  width: 0;
  /*height: calc(100% - 24px);*/
  height: 100%;
  margin-bottom: -24px;
}

到這里，右下角環繞的效果就基本完成，省略號也是位于展開按鈕之前的，完整代碼可以查看 codepen 右下角多行展開環繞效果

4.其他瀏覽器的兼容處理

上面的實現是最完美的處理方式。原本以為兼容性沒什么大問題的，畢竟只用到了文本截斷和浮動，-webkit-line-clamp 雖然是 -webkit- 前綴，不過 firefox 也是支持的，打開一看傻了眼，safari 和 firefox 居然全亂了！

這就有點難受了，前面那么多努力都白費了嗎？不可能不管這兩個，不然就只能是 demo 了，無法用于生產環境。

趕緊打開控制臺看看是什么原因。一番查找，結果發現是 display: -webkit-box ！設置該屬性后，原本的文本好像變成了一整塊，浮動元素也無法產生環繞效果，去掉之后浮動就正常了

那么問題來了：沒有 display: -webkit-box 怎么實現多行截斷呢？

其實上面的努力已經實現了右下角環繞的效果，如果在知道行數的情況下設置一個最大高度，是不是也完成了多行截斷呢？為了便于設置高度，可以添加一個行高 line-height，如果需要設置成3行，那高度就設置成 line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

為了方便更好的控制行數，這里可以把常用的行數通過屬性選擇器獨立出來（通常不會太多），如下

[line-clamp="1"] {
  max-height: 1.5em;
}
[line-clamp="2"] {
  max-height: 3em;
}
[line-clamp="3"] {
  max-height: 4.5em;
}
...

<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
 ...
</div>

可以看到基本上正常了，除了沒有省略號，現在加上省略號吧，跟在展開按鈕之前就可以了，可以用偽元素實現

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

這樣，Safari 和 Firefox 的兼容布局基本上就完成了，完整代碼可以查看 codepen 右下角多行展開環繞效果（全兼容）

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

提到 CSS 狀態切換，大家都能想到 input type="checkbox" 吧。這里我們也需要用到這個特性，首先加一個 input ，然后把之前的 button 換成 label ，并且通過 for 屬性關聯起來

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展開</label>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

這樣，在點擊 label 的時候，實際上是點擊了 input 元素，現在來添加兩種狀態，分別是只顯示 3 行和不做行數限制

.exp:checked+.text{
  -webkit-line-clamp: 999; /*設置一個足夠大的行數就可以了*/
}

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

.exp:checked+.text{
  max-height: none;
}

這里還有一個小問題，“展開”按鈕在點擊后應該變成“收起”，如何修改呢？

有一個技巧，凡是碰到需要動態修改內容的，都可以使用偽類 content 生成技術，具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

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

.btn::after{
  content:'展開' /*采用content生成*/
}

添加 :checked 狀態

.exp:checked+.text .btn::after{
  content:'收起'
}

兼容版本由于前面的省略號是模擬出來的，不能自動隱藏，所以需要額外來處理

.exp:checked+.text .btn::before {
    visibility: hidden; /*在展開狀態下隱藏省略號*/
}

基本和本文開頭的效果一致了，完整代碼可以查看 codepen 多行展開收起交互，兼容版本可以查看 codepen 多行展開收起交互（全兼容）

還有一點，如果給 max-height 設置一個合適的值，注意，是合適的值，具體原理可以參考CSS 奇技淫巧：動態高度過渡動畫，還能加上過渡動畫

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就可以了*/
}

三、文本行數的判斷

上面的交互已經基本滿足要求了，但是還是會有問題。比如當文本較少時，此時是沒有發生截斷，也就是沒有省略號的，但是“展開”按鈕卻仍然位于右下角，如何隱藏呢？

通常 js 的解決方式很容易，比較一下元素的 scrollHeight 和 clientHeight 即可，然后添加相對應的類名。下面是偽代碼

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk')
}

那么，CSS 如何實現這類判斷呢？

可以肯定的是，CSS 是沒有這類邏輯判斷，大多數我們都需要從別的角度，采用 “障眼法”來實現。比如在這個場景，當沒有發生截斷的時候，表示文本完全可見了，這時，如果在文本末尾添加一個元素（紅色小方塊），為了不影響原有布局，這里設置了絕對定位

.text::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: red;
}

可以看到，這里的紅色小方塊是完全跟隨省略號的。當省略號出現時，紅色小方塊必定消失，因為已經被擠下去了，這里把父級 overflow: hidden 暫時隱藏就能看到是什么原理了

然后，可以把剛才這個紅色的小方塊設置一個足夠大的尺寸，并且降低透明度，比如 100% * 100%

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}

可以看到，紅色的塊塊把右下角的都覆蓋了，現在把背景改為白色（和父級同底色），父級 overflow: hidden 重新加上

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

現在看看點擊展開的效果吧

現在展開以后，發現按鈕不見（被剛才那個偽元素所覆蓋，并且也點擊不了），如果希望點擊以后仍然可見呢？添加一下 :checked 狀態即可，在展開時隱藏覆蓋層

.exp:checked+.text::after{
    visibility: hidden;
}

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

最終完整代碼可以查看 codepen 多行展開收起自動隱藏，兼容版本可以查看 codepen 多行展開收起自動隱藏（全兼容）

需要注意的是，兼容版本可以支持到 IE 10+（這就過分了啊，居然還支持 IE），但是由于 IE 不支持 codepen，所以測試 IE 可以自行復制在本地測試。

四、總結和說明

總的來說，重點還是在布局方面，交互其實相對容易，整體實現的成本其實是很低的，也沒有比較生僻的屬性，除了布局方面 -webkit-box 貌似有點 bug （畢竟是-webkit-內核，火狐只是借鑒了過來，難免有些問題），幸運的是可以通過另一種方式實現多行文本截斷效果，兼容性相當不錯，基本上全兼容（IE10+），這里整理一下實現重點

文本環繞效果首先考慮 浮動 float
flex 布局子元素可以通過百分比計算高度
多行文本截斷還可以結合文本環繞效果用 max-height 模擬實現
狀態切換可以借助 checkbox
CSS 改變文本可以采用偽元素生成
多利用 CSS 遮擋“障眼法”

多行文本展開收起效果可以說是業界一個老大難的問題了，有很多 js 解決方案，但是感覺都不是很完美，希望這個全新思路的 CSS 解決方式能給各位帶來不一樣的啟發，感謝閱讀，歡迎點贊、收藏、轉發～

References

[1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh
[2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch
[3] codepen 右下角多行展開環繞效果: https://codepen.io/xboxyan/pen/ExWaBJO
[4] codepen 右下角多行展開環繞效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr
[5] codepen 多行展開收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ
[6] codepen 多行展開收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR
[7] CSS 奇技淫巧：動態高度過渡動畫: https://github.com/chokcoco/iCSS/issues/91
[8] codepen 多行展開收起自動隱藏: https://codepen.io/xboxyan/pen/eYvNvYK
[9] codepen 多行展開收起自動隱藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK

景

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

那么，如何通過純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>

<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>

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

言

面試官：同學考你一個簡單css內容，寫一個可展開列表。
我：笑出了聲。心想真的會出這么簡單的內容哈哈哈！
面試官：同學不能用js哦，如果可以用stylus編寫就更好啦！
我：小腦剎那間萎縮了......

Stylus 是一種 CSS 預處理器。預處理器是一種腳本語言，它擴展了 CSS 的功能，使得編寫 CSS 更加高效、靈活和強大。Stylus 特別之處在于其簡潔而靈活的語法，它允許開發者使用變量、嵌套規則、混合（Mixins）、繼承、操作符、函數以及條件語句等高級功能來編寫樣式代碼。

接下來，讓我們通過一個騰訊的面試題，來更加深層次認識這個stylus語言帶給css的便捷。雖然考察的是純html+css內容，要想純html+css達到完美可卻不簡單。

效果

有三個列表，并且可以展開和收縮，這題目看起來簡單，但是且聽我細細道來，你會發現里面有很多的秘密！

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>純css菜單</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <div class="accordion">
        <input type="checkbox" id="collapse1" hidden>
        <input type="checkbox" id="collapse2" hidden>
        <input type="checkbox" id="collapse3" hidden>
        <!-- div替代品 html5語義化標簽 SEO比較重要 -->
        <article>
            <label for="collapse1">列表1</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
    </div>
</body>

</html>

首先我們要進行stylus語言環境的配置，并引入其生成的css文件，配置好之后，我們先看看html部分。

我們設置了三個復選框，并且復選框的id與label標簽的for相對應，可以方便用戶的操作。服務于用戶。
我們用article語義化標簽，這有助于搜索引擎優化（SEO）和屏幕閱讀器更好地理解頁面結構。每個標簽里面放入四段列表。

到此我們html部分就結束啦，我們重點講解一下css部分。

css部分

* {
  margin: 0;
  padding: 0;
}
.accordion {
  width: 300px;
}
.accordion article {
  cursor: pointer;
}
.accordion article + article {
  margin-top: 5px;
}
.accordion label {
  display: block;
  height: 40px;
  padding: 0 20px;
  background-color: #f00;
  cursor: pointer;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
}
.accordion p {
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid #f66;
  border-top: none;
  border-bottom-width: 0;
  max-height: 0;
  line-height: 30px;
  transition: all 500ms;
}
.accordion input:nth-child(1):checked ~ article:nth-of-type(1) p,
.accordion input:nth-child(2):checked ~ article:nth-of-type(2) p,
.accordion input:nth-child(3):checked ~ article:nth-of-type(3) p {
  max-height: 600px;
}
    <生成css>
---------------------------
    <書寫的stylus>
    
    *
    margin 0
    padding 0
.accordion 
    width 300px
    article
        cursor pointer
        & + article
            margin-top 5px
    label
        display block
        height 40px
        padding 0 20px
        background-color red
        cursor pointer
        line-height 40px
        font-size 16px
        color #fff
    p
        overflow: hidden
        padding: 0 20px
        border: 1px solid #f66
        border-top: none
        border-bottom-width 0
        max-height: 0
        line-height 30px
        transition: all 500ms
    input  
        &:nth-child(1):checked ~ article:nth-of-type(1)  p , 
        &:nth-child(2):checked ~ article:nth-of-type(2)  p ,
        &:nth-child(3):checked ~ article:nth-of-type(3)  p 
            max-height:  600px

我們首先清除默認的內外邊距。
對整體的accordion設置寬度。
對article標簽設置鼠標經過變成小手。
通過相鄰兄弟選擇器我們設置第二個和第三個article的margin top 值。
對label標簽我們設置一些基本的樣式。
接下來就是我們最重要的部分，我們這里運用了全體兄弟選擇器，我們以input下第一段為例子說明，后面都是一樣的，我們選中第一個被勾選的復選框，然后通過全體兄弟選擇器找到所有的article，并根據復選框的序號找到對應article的位置，然后將里面的p顯現出來，這一段是我們的核心部分！所以也可以理解為nth-child搭配input，nth-of-type搭配article。

作者：落雪遙夏
鏈接：https://juejin.cn/post/7379873506543616010

在線咨詢

上一篇：HTML大文件上傳源代碼
下一篇：JSP運行原理及運行過程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 實現多行文本“展開收起”

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

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

三、文本行數的判斷

四、總結和說明

景

實現的難點

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

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

三、文本行數的判斷

言

效果

html部分

css部分

您的項目需求

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

三、文本行數的判斷

三、文本行數的判斷