日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS如何實(shí)現(xiàn)多行文本展開收起效果

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

目前創(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é)力一起成長(zhǎng)，共同發(fā)展。

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

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

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

初始 html：

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

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

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

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

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

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

    局右

     
 
 
 
      
  
  
  
  
    1. .text::before{ 
      2.   
  
  
  
    2.     content: ''; 
      3.   
  
  
  
    3.     float: right; 
      4.   
  
  
  
    4. } 
      5.

    局下

     
 
 
 
      
  
  
  
  
    1. .text::before{ 
      2.   
  
  
  
    2.     content: ''; 
      3.   
  
  
  
    3.     float: right; 
      4.   
  
  
  
    4.     width: 0; 
      5.   
  
  
  
    5.     height: calc(100% - 20px); 
      6.   
  
  
  
    6. } 
      7.

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

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

    — CSS 世界

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

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

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

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

    多行文本溢出省略效果

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

    多行文本(css)

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

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.

    最終，大功告成：


    本文名稱：CSS如何實(shí)現(xiàn)多行文本展開收起效果
    瀏覽地址：http://www.5511xx.com/article/coioggp.html