好看的言情小说,完美世界txt下载,怎样写网络小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS如何實(shí)現(xiàn)多行文本展開收起效果

本文轉(zhuǎn)載自微信公眾號「三分鐘學(xué)前端」，作者sisterAn 。轉(zhuǎn)載本文請聯(lián)系三分鐘學(xué)前端公眾號。

目前創(chuàng)新互聯(lián)建站已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、奈曼網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

最終實(shí)現(xiàn)效果：

本文主要實(shí)現(xiàn)難點(diǎn)：

如何實(shí)現(xiàn) 展開和收起切換按鈕的文字環(huán)繞效果
如何實(shí)現(xiàn)多行文本溢出省略效果
如何實(shí)現(xiàn) 展開和收起的狀態(tài)or文字切換

初始 html：

 
 
 
 
  
  
  
     
  
  
    展開   
  
  
       
  
  
      但聽得蹄聲如雷，十余乘馬疾風(fēng)般卷上山來。馬上乘客一色都是玄色薄氈大氅，   
  
  
      里面玄色布衣，但見人似虎，馬如龍，人既矯捷，馬亦雄駿，每一匹馬都是高頭   
  
  
      長腿，通體黑毛，奔到近處，群雄眼前一亮，金光閃閃，卻見每匹馬的蹄鐵竟然   
  
  
      是黃金打就。來者一共是一十九騎，人數(shù)雖不甚多，氣勢之壯，卻似有如千軍萬   
  
  
      馬一般，前面一十八騎奔到近處，拉馬向兩旁一分，最后一騎從中馳出

控制按鈕文字環(huán)繞效果

一般展開、收起按鈕都在文字的右下腳：

局右：float: right
局下：margin-top

但 margin 雖然可以將按鈕局下，但它無法實(shí)現(xiàn)文字環(huán)繞效果，所以我們這里利用偽元素實(shí)現(xiàn)：

局右：float: right
局下：.text::before

局右

 
 
 
 
  
  
  
  .text::before{   
  
  
      content: '';   
  
  
      float: right;   
  
  
  }

局下

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

我們發(fā)現(xiàn)出現(xiàn)了高度塌陷( calc(100% - 20px) 無效)的問題：

由于包含塊的高度沒有顯式指定，并且該元素不是絕對定位，則計(jì)算值偽 auto，auto * 100/100 = NaN

— CSS 世界

此時(shí)解決辦法有：

設(shè)置顯式的高度值：這里高度是動(dòng)態(tài)的，沒辦法顯式指定，所以此方法不可用?
如果包含塊的高度顯式指定，則設(shè)置該元素為絕對定位：包含塊的高度是動(dòng)態(tài)的，沒辦法顯式指定，所以此方法也不可用?
在元素外邊包一層具有包裹性又具有定位特性的標(biāo)簽：?

這里包一層 flex 布局。因?yàn)樵?flex 布局的子項(xiàng)中，可以通過百分比來計(jì)算變化高度，因此，這里需要給 .text 包裹一層，然后設(shè)置 display: flex

 
 
 
 
  
  
  
     
  
  
      
  
  
     展開   
  
  
        
  
  
       但聽得蹄聲如雷，十余乘馬疾風(fēng)般卷上山來。馬上乘客一色都是玄色薄氈大氅，   
  
  
       里面玄色布衣，但見人似虎，馬如龍，人既矯捷，馬亦雄駿，每一匹馬都是高頭   
  
  
       長腿，通體黑毛，奔到近處，群雄眼前一亮，金光閃閃，卻見每匹馬的蹄鐵竟然   
  
  
       是黃金打就。來者一共是一十九騎，人數(shù)雖不甚多，氣勢之壯，卻似有如千軍萬   
  
  
       馬一般，前面一十八騎奔到近處，拉馬向兩旁一分，最后一騎從中馳出

多行文本溢出省略效果

我們在 CSS 實(shí)現(xiàn)文本的單行和多行溢出省略效果介紹過：

多行文本(css)

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

-webkit-line-clamp: 3(用來限制在一個(gè)塊元素顯示的文本的行數(shù), 2 表示最多顯示 2 行。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性)
display: -webkit-box(和 1 結(jié)合使用，將對象作為彈性伸縮盒子模型顯示 )
-webkit-box-orient: vertical(和 1 結(jié)合使用，設(shè)置或檢索伸縮盒對象的子元素的排列方式 )
overflow: hidden(文本溢出限定的寬度就隱藏內(nèi)容)
text-overflow: ellipsis(多行文本的情況下，用省略號“…”隱藏溢出范圍的文本)

如何實(shí)現(xiàn) 展開和收起的狀態(tài)切換

使用 input type="checkbox" 控制展開與收起效果

但文字展開后控制按鈕依然顯示展開，應(yīng)該顯示收起才對

這里使用偽類生成技術(shù)，具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

最終，大功告成：

網(wǎng)站標(biāo)題：CSS如何實(shí)現(xiàn)多行文本展開收起效果
標(biāo)題網(wǎng)址：http://m.fisionsoft.com.cn/article/coioggp.html

新聞中心

控制按鈕文字環(huán)繞效果

多行文本溢出省略效果

如何實(shí)現(xiàn) 展開 和 收起 的狀態(tài)切換

其他資訊

如何實(shí)現(xiàn) 展開和收起的狀態(tài)切換