關于帶有&quot;顯示更多&quot;按鈕的多行文本截斷思考

2024-08-30 08:33:28

字體：大中小

來源：轉載

供稿：網友

剛好最近遇到這個小需求，記得很早之前都是用 JS 處理，畢竟那時候年少無知。切換類的操作可以用 Checked 偽類實現，成本會比較低一點，那么先來列一下功能要點：

多行文本截斷，顯示省略號
"顯示更多" 按鈕可以展開所有文本
展開文本后，按鈕的文字變成 "收起文本"
按鈕的出現條件為當文本被截斷時（如果你文本只有一行，那就沒必要顯示了吧:sweat:）

疑問點： text-overflow: ellipsis 不支持多行截斷。按鈕文字切換， CSS 該如何切換文本? 按鈕的出現條件又如何判斷? 下面我將逐一講解:balloon:

多行文本截斷

假設現有的 HTML 結構如下：

<div class="box">  <p>文本內容</p></div>

如果需要單行截斷，一般的做法是：

p {  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}

效果如下：

多行文本需要用到 line-clamp ，定義被截斷文本的行數：

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

效果如下：

按鈕點擊展示所有文本

現在 HTML 結構改造成如下：

<div class="box">  <input type="checkbox" name="toggle" id="toggle" style="display: none;">  <p>文本內容</p>  <label for="toggle">顯示更多</label></div>

監聽按鈕的點擊行為則用文首說的 Checked 偽類：

input[name="toggle"]:checked { & + p {   -webkit-line-clamp: unset; }}

這樣當用戶點擊（選中）的時候，將展示所有文本，未選中則收起文本：

按鈕文字動態化

講道理，當展示所有文本之后，按鈕的文字應該要切換成 "收起文本" ， CSS 怎么修改文本啊，其實用偽元素的 content 就行了。

把 HTML 中的文字去掉，然后換成 CSS 控制：

<label for="toggle"></label>label {  &::after {    content: "顯示更多";  }}

同理可得：

input[name="toggle"]:checked {  & ~ label {    &::after {      content: "收起文本";    }  }}

效果如下：

按鈕樣式丑的那就自己調一下咯:sweat:

按鈕出現的條件

當文本少于三行時，按鈕不應該出現，因為沒必要：

出大問題，網上沖浪后，發現沒有任何偽類可以判斷文本是否被截斷，如果有，我們可以這樣做：

p { &:truncated {   & + label {    display: block;   } }   }label {  display: none;}

truncated 意思是截斷的。

不過就算這樣，也無法實現我們的需求，因為當你顯示所有文本后，你的文本就沒有被截斷了，所以按鈕會消失：

以上是依靠一段 JS 實現的模擬效果，源碼如下：

let list = document.querySelectorAll("p");let observer = new ResizeObserver(entries => {  entries.forEach(item => {    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("truncated");  });});list.forEach(p => {  observer.observe(p);});

原理就是監聽文本元素的大小變化，然后動態增加 truncated 類名:joy:

所以，你的 CSS 中的 truncated 偽類應該改成 truncated 類:sweat:

p { &.truncated {   & + label {    display: block;   } }   }

我們希望切換的時候，按鈕一直都在，而不是文本沒被截斷的時候就不顯示按鈕，因此，我們不需要一直監聽文本元素的大小改變，我們只需要一個初始值（文本初始化的時候到底有沒有被截斷），也就是只監聽一次！

entries.forEach(item => {  //... 原來的代碼    observer.unobserve(item.target); // 移除監聽});

或者根本不需要用這個 API ，直接頁面初始化的時候，遍歷判斷一遍就行拉！

let list = document.querySelectorAll("p");list.forEach(item => {  item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated");});

這樣， P 元素在頁面初始化的時候，會自動加上 truncated 類名，而按鈕又可以一直顯示：