欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于帶有"顯示更多"按鈕的多行文本截?cái)嗨伎?/h1>
  發(fā)布時(shí)間：2019-09-16 14:33:28   作者：佚名   我要評(píng)論
這篇文章主要介紹了關(guān)于帶有"顯示更多"按鈕的多行文本截?cái)嗨伎?本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

剛好最近遇到這個(gè)小需求，記得很早之前都是用 JS 處理，畢竟那時(shí)候年少無(wú)知。 切換類(lèi)的操作 可以用 Checked 偽類(lèi)實(shí)現(xiàn)，成本會(huì)比較低一點(diǎn)，那么先來(lái)列一下功能要點(diǎn)：

  1. 多行文本截?cái)?，顯示省略號(hào)
  2. "顯示更多" 按鈕可以展開(kāi)所有文本
  3. 展開(kāi)文本后，按鈕的文字變成 "收起文本"
  4. 按鈕的出現(xiàn)條件為當(dāng)文本 被截?cái)?時(shí)（如果你文本只有 一行 ，那就沒(méi)必要顯示了吧:sweat:）

疑問(wèn)點(diǎn)： text-overflow: ellipsis 不支持多行 截?cái)?。按鈕文字切換， CSS 該如何切換文本? 按鈕的出現(xiàn)條件又如何判斷? 下面我將逐一講解:balloon:

多行文本截?cái)?/strong>

假設(shè)現(xiàn)有的 HTML 結(jié)構(gòu)如下：

 

<div class="box">
  <p>文本內(nèi)容</p>
</div>

如果需要單行 截?cái)?，一般的做法是：

 

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

效果如下：

 

多行文本需要用到 line-clamp ，定義 被截?cái)?文本的行數(shù)：

 

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

效果如下：

 

按鈕點(diǎn)擊展示所有文本

現(xiàn)在 HTML 結(jié)構(gòu)改造成如下：

 

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

監(jiān)聽(tīng)按鈕的點(diǎn)擊行為則用文首說(shuō)的 Checked 偽類(lèi)：

 

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

這樣當(dāng)用戶點(diǎn)擊（選中）的時(shí)候，將 展示 所有文本，未選中則 收起 文本：

 

按鈕文字動(dòng)態(tài)化

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

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

 

<label for="toggle"></label>

label {
  &::after {
    content: "顯示更多";
  }
}

 

同理可得：

 

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

效果如下：

 

按鈕樣式丑的那就自己調(diào)一下咯:sweat:

按鈕出現(xiàn)的條件

當(dāng)文本少于 三行 時(shí)，按鈕不應(yīng)該出現(xiàn)，因?yàn)闆](méi)必要：

 

出大問(wèn)題，網(wǎng)上沖浪后，發(fā)現(xiàn)沒(méi)有任何 偽類(lèi) 可以判斷文本是否 被截?cái)?，如果有，我們可以這樣做：

 

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

truncated 意思是 截?cái)?的。

不過(guò)就算這樣，也無(wú)法實(shí)現(xiàn)我們的需求，因?yàn)楫?dāng)你顯示所有文本后，你的文本就沒(méi)有 被截?cái)?了，所以按鈕會(huì)消失：

 

以上是依靠一段 JS 實(shí)現(xiàn)的 模擬效果 ，源碼如下：

 

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);
});

 

原理就是 監(jiān)聽(tīng) 文本元素的大小變化，然后動(dòng)態(tài)增加 truncated 類(lèi)名:joy:

所以，你的 CSS 中的 truncated 偽類(lèi)應(yīng)該改成 truncated 類(lèi):sweat:

 

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

我們希望 切換 的時(shí)候，按鈕一直都在，而不是文本沒(méi) 被截?cái)?的時(shí)候就不顯示按鈕，因此，我們不需要一直 監(jiān)聽(tīng) 文本元素的大小改變，我們只需要一個(gè)初始值（文本初始化的時(shí)候到底有沒(méi)有 被截?cái)?），也就是只監(jiān)聽(tīng)一次！

 

entries.forEach(item => {
  //... 原來(lái)的代碼
  
  observer.unobserve(item.target); // 移除監(jiān)聽(tīng)
});

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

 

let list = document.querySelectorAll("p");

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

 

這樣， P 元素在頁(yè)面初始化的時(shí)候，會(huì)自動(dòng)加上 truncated 類(lèi)名，而按鈕又可以一直顯示：

 

擴(kuò)展

比如你可以自定義按鈕樣式、在底部增加一個(gè)透明漸變的蒙層、切換時(shí)候的過(guò)渡效果:grin:

總結(jié)
 

checked 偽類(lèi)是個(gè)好東西，能滿足很多需求而不用寫(xiě) JS ，因此凡是有關(guān) 切換類(lèi)的操作 都可以考慮用它。

以上所述是小編給大家介紹的關(guān)于帶有"顯示更多"按鈕的多行文本截?cái)嗨伎?希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

  • 用css截取字符實(shí)現(xiàn)文字自動(dòng)截?cái)嚯[藏溢出文本

    這篇文章主要介紹了用css截取字符實(shí)現(xiàn)文字自動(dòng)截?cái)嚯[藏溢出文本，需要的朋友可以參考下
    2014-05-19

    • 最新評(píng)論