緣起#
本次想分享的主題是多行文本的 "展開收起", 這個需求在平時是一個稀鬆平常的需求，但是實現起來卻需要很多技巧。接下來跟著作者一起去慢慢思考吧～
圖 1-1 展開收起文本示意圖
解決方案#
浮動#
看到這個按鈕的位置，我們大致都能意識到，這並不是簡單的佈局就能達到的效果，也不是定位就能達到的效果，是必須使用浮動才能達到這種類圖文混合的效果.
如果沒有顯示出按鈕則點擊這裡在網站中打開此示例.
現在我們看到已經成功的讓文字和按鈕混合到了一起，形成了類似圖文混排的結構，接下來要做的就是需要把按鈕移動到文本省略號的後面，這一點該怎麼實現呢？其實同樣有個浮動的元素在按鈕旁邊，然後使用clear: right;或者clear: both;把按鈕右側的浮動清除掉並把按鈕向下移動。那麼這個浮動元素怎麼來的呢？其實同樣簡單同樣創建一個元素，讓這個元素浮動到右側即可.
如果顯示出現問題則點擊這裡在網站中打開此示例
上面我們是用了一个 div 做了一个浮动元素，实际上更简单的就是直接使用div.main的before元素做一个高度，这样既不需要再去增加一个多余的元素破坏可读性.
在上面的示例中实际上还有一个问题，就是before/div.line的高度在这里书写的时候是硬编码，而在实际应用时应该是灵活编码，我们第一眼看到后就会想到的解决办法就是把height: 88px;更改为height: 100%;, 有思路是好的，但是不妨我们真实试验一下，我们会神奇的发现height: 100%;没有作用，仍然没有高度，存疑🤨, 不太懂这边高度失效问题
2023-07-06 補充:
height: 100%;失效問題請看我的這片文章height: 100%; 失效問題探究
效果已經初步達到了，剩下的只需要我們簡單的處理一下展開和收起兩種狀態樣式的處理，最簡單不需要什麼技巧的方式就是直接寫一段Js處理一下，根據點擊為div.main增添 / 刪除多行省略樣式即可，我們這裡換另一種處理方式，換一種技巧來處理，不使用Js只使用Html與Css即可達到相同的效果。我們都知道label標籤，該標籤在搭配<input type="checkbox">就可以達到控制狀態的效果，即可選中 / 取消, 並且input還提供有選中狀態時的伪类，這下更方便，還有最後一個疑問就是如何改變按鈕的文字呢？不知道大家有沒有了解content這個 css 屬性，這個屬性完全可以做到這種效果可以為元素填充內容，這樣我們使用Html與Css完全能夠達到Js的能做的效果.
如果示例存在問題則點擊這裡在網站中打開此示例
字體樣式#
換一種思路，這個按鈕我們不做了，我們直接更改省略號…的字體樣式更改為任意我們想要的樣式，這涉及到了字體樣式，我們採用iconfont進行直接使用自己定義好的字體樣式
同時我們需要把展開對應的字符更改為省略號…, Unicode 值為2026, 字符為…
注意不要和...搞混了，不然就會發生一個.對應一個展開圖標，這是一個令人悲傷的故事。下面這張是個錯誤示範.
現在展開的按鈕可以稱之為有了形狀，但是卻沒有其功能，因為目前沒辦法單靠這種方式做到展開收起，我們還需要增添真正用來控制狀態的方式，不過該種方式實現基本同上面所說的label與<input type="checkbox">一致，唯一不同的一點是我們需要手動給label一個寬高將其定位到省略號到位置，也就是容器的右下角即可.
Js 模擬容器#
該想法是在看到vant中有一個文本省略組件, 好奇心驅使之下前往github瞅了瞅源碼，茅塞頓開，天啦嚕，這操作太👖🌶️!
這裡所言的模擬容器是克隆一個和折疊文本容器同樣的容器，然後將該容器移動至視口外，不斷減少其中的文字數量然後不斷檢測預定的折疊文本高度與當前容器的高度，這樣就能找到合適的字數，最後拼接上省略號和按鈕即可達到我們的目標.
結尾#
看過幾次這個問題，每次都是按照浮動方案解決這個問題，直至這次才真正的去認真思考其他的方案，雖然不是我想出來的，但是學習別人的優秀思路更是成長的一種方式.
參閱資料:
https://juejin.cn/post/6963904955262435336
https://juejin.cn/post/7214839315855491130
https://github.com/youzan/vant/blob/main/packages/vant/src/text-ellipsis/TextEllipsis.tsx