整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Html中Css樣式Ⅱ

          素的定位(方式五種定位方式):

          1. 靜態定位: position:static;
          2. 相對定位: position:relative;
          3. 絕對定位: position:absolute;
          4. 固定定位: position: fixed;
          5. 浮動定位: float:left/right

          靜態定位(文檔流定位)

          • 格式: position:static; (默認的定位方式)
          • 特點: 元素以左上為基準, 塊級元素從上往下排列,行內元素從左向右依次排列, 默認情況下 無法實現元素的層疊效果
          • 如何控制元素的位置? 通過外邊距控制元素的位置

          相對定位

          • 格式: position:relative;
          • 特點: 元素不脫離文檔流(仍然占著原來的位置) ,可以實現元素的層疊效果
          • 如何控制元素的位置? 通過left/right/top/bottom 控制元素的顯示位置,參照物是初始位置
          • 應用場景: 當希望移動某一個元素其它元素不受影響時使用相對定位, 相對定位可以實現元素的層疊
          <style>
              div {
                  width: 100px;
                  height: 100px;
                  border: 1px solid red
                }
              div:hover {
                /*margin: 20px 0 0 20px;*/
                /*修改為相對定位*/
                position: relative;
                top: 20px;
                left: 20px;
              }
          </style>
          <body>
          <div>div1</div>
          <div>div2</div>
          <div>div3</div>
          </body>

          絕對定位

          • 格式: position:absolute;
          • 特點: 元素脫離文檔流(不占原來的位置),可以實現元素層疊
          • 如何控制元素的位置?通過left/right/top/bottom控制位置,參照物為窗口或某一個上級元素(需要在上級元素中添加position:relative作為參照物)
          • 應用場景: 當需要往頁面中添加一個元素并且不影響其它元素的顯示位置,并且可以實現層疊效果
          <style>
               div{
                  width: 300px;padding: 10px;
                  background-color: rgba(0,0,0,0.3);
                  position: relative;/*參照物*/
                }
              input{
                width: 260px;/*300-20*2內邊距*/
                padding: 10px 20px;border: none;
              }
              img{
                position: absolute;
                top: 14px;right: 40px;
              }
              p{margin: 0;font-size: 12px; color: red;}
              </style>
          <body>
          <div>
            <input type="text" placeholder="請輸入用戶名">
            <img src="http://celinf.org/yhm.png" alt="">
            <p>用戶名不能為空!</p>
          </div>
          </body>

          固定定位

          • 格式: position:fixed;
          • 特點: 脫離文檔流
          • 如何控制元素的位置?通過left/right/top/bottom相對于窗口做偏移
          • 應用場景: 當需要將元素固定在窗口的某個位置時使用
          <style>
                #d1{
                  width: 1000px; height: 100px; background-color: red;
                  position: fixed; top:0;
                }
              body{
                padding-top: 100px;
              }
              #d2{
                width: 50px;height: 200px;
                background-color: blue;
                position: fixed;
                padding-top: 200px;right: 0;
              }
            </style>
          <body>
          <div id="d1"></div>
          <div id="d2"></div>
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          <img src="../bee.png" alt="">
          </body>

          浮動定位

          • 格式: float:left/right;
          • 特點: 脫離文檔流, 元素從當前所在行向左或向右浮動,當撞到上級元素邊緣或其它元素時停止.
          • 浮動元素一行裝不下時會自動折行, 折行時有可能被卡住
          • 當元素的所有子元素全部浮動時,自動識別的高度會為0,后面元素會頂上來導致顯示異常,通過給元素添加overflow:hidden可以解決此問題
          • 應用場景: 當需要將縱向排列的元素改成橫向排列時使用.
          <style>
              body>div{
                width: 200px; border: 1px solid red;
                /*當元素的所有子元素全部浮動時 自動識別的高度為0
                        后面的元素會頂上來導致顯示異常,添加overflow:hidden解決此異常*/
                overflow: hidden;
              }
            #d1{
              width: 50px; height: 50px;
              background-color: red;
              float: left;
            }
            #d2{
              width: 50px; height: 50px;
              background-color: green;
              float: left;
            }
            #d3{
              width: 50px;height: 50px;
              background-color: blue;
              float: left;
            }
              </style>
          <body>
          <div>
              <div id="d1"></div>
              <div id="d2"></div>
              <div id="d3"></div>
          </div>
          </body>

          溢出設置overflow

          • visible超出部分顯示(默認)
          • hidden超出部分隱藏
          • scroll 超出部分滾動顯示

          行內元素垂直對齊方式vertical-align

          • top 上對齊
          • middle中間對齊
          • bottom下對齊
          • baseline基線對齊(默認)
          <style>   /* 塊元素居中  margin */
            div{
              width: 200px;height: 200px;
              border: 1px solid red;
              /*設置超出部分的顯示方式*/
              overflow: scroll;
            }
          img{
            width: 100px;
            /*設置行內元素的垂直對齊方式
                      top上對齊
                      middle中間對齊
                      bottom下對齊
                      baseline基線對齊(默認)*/
            vertical-align: bottom;
          }
          </style>

          元素的顯示層級

          當兩個元素非靜態定位時可能存在層疊的問題 通過z-index樣式控制顯示層級, 值越大顯示越靠前

          <style>
              #d1{
                width: 50px;height: 100px;
                background-color: red;
                position: absolute;
                /*設置顯示層級 值越大顯示越靠前
                        只對非靜態定位的元素有效*/
                z-index: 1;
              }
            #d2{
              width: 100px;height: 50px;
              background-color: blue;
              position: absolute;
              z-index: 2;
            }
          </style>
          <body>
          <div id="d1"></div>
          <div id="d2"></div>
          </body>

          綜合布局練習Demo

          Demo的效果圖

          <style>
            body{
              font: 12px "simhei", Arial, Helvetica, sans-serif;
              color: #666;
            }
          body>div{
            width: 1000px;margin: 0 auto;
          }
          #t_l_div{
            width: 611px; height: 376px;
            float: left; position: relative;
          }
          #t_r_div{
            width: 375px; height: 376px;
            float: right;position: relative;
          }
          #t_div{
            overflow: hidden;margin-bottom: 10px;
          }
          #t_div>div,#b_l_div,#b_r_div>div{
            background-color: #e8e8e8;
          }
          #b_div{
            overflow: hidden;
          }
          #b_l_div{
            width: 366px;height: 233px;
            float: left;
          }
          #b_r_div{
            overflow: hidden;float: right;
          }
          #b_r_div>div{
            width: 198px;height: 233px;
            float: left;margin-left: 10px;
          }
          #ls_d1{
            margin: 25px 0 0 50px;width: 245px;
            height: 232px; padding: 5px;
          }
          .title_p{
            color: #333333; font-size: 32px;
            font-weight: lighter;
          }
          .intro_p{
            ont-size: 12px;font-weight: lighter;
          }
          .price_p{
            margin-bottom: 12px;font-weight: bold;
            color: #0AA1ED;font-size: 24px;
          }
          .a_title{
            display: block;
            background-color: #0aa1ed;
            color: white;width: 132px;
            height: 40px; text-align: center;
            line-height: 40px;font-size: 20px;
            text-decoration: none;border-radius: 2px;
          }
          #t_l_div>img{
            position: absolute;
            right: 20px;bottom: 15px;
          }
          #lr_d1{
            width: 253px;height: 232px;
            padding: 4px;text-align: left;
            margin: 39px 0 0 25px;
          }
          #t_r_div>img{
            position: absolute;
            right: 10px;bottom: 3px;
          }
          .s_title{
            font-size: 12px;width: 100px;
            height: 24px; line-height: 24px;
            margin: 0 auto;
          }
          .s_info{
            font-size: 12px;text-align: center;
            color: #333333;padding-top: 0;
            margin-top: 0;
          }
          .s_price{
            text-align: center;font-size: 12px;
            font-weight: bold;margin: 6px auto;
            color: #0aa1ed;
          }
          #b_l_div>p,ul{
            padding: 0;margin: 0;
          }
          #top_div{
            color: white; font-size: 16px;
            background-color: #0aa1ed;
            line-height: 35px;border-radius: 2px;
            bottom: 5px;
          }
          #top_div>img{
            float: left;margin: 10px 5px 0 10px;
          }
          .c_div{
            padding-left: 10px;
          }
          .c_div>p{
            color: #62B5EC; margin: 17px 0 9px 0;
          }
          .c_div>ul{
            list-style-type: none;overflow: hidden;
          }
          .c_div>ul>li{
            float: left;margin-right: 10px;
          }
          .c_div>ul>li>a{
            text-decoration: none;color: #0aa1ed;
          }
          </style>
          <body>
          <div>
              <div id="t_div">
                  <div id="t_l_div">
                      <div id="ls_d1">
                          <p class="title_p">靈越 燃7000系列</p>
                          <p class="intro_p">
                              酷睿雙核i5處理器|256GB SSD| 8GB內存<br>
                              英特爾HD顯卡620含共享顯卡內存
                          </p>
                          <p class="price_p">¥4999.00</p>
                          <a href="#" class="a_title">查看詳情</a>
                      </div>
                      <img src="http://celinf.cn/study_computer_img1.png" alt="圖1">
                  </div>
                  <div id="t_r_div">
                      <div id="lr_d1">
                          <p class="title_p">顏值 框不住</p>
                          <p class="intro_p">
                              酷睿雙核i5處理器|256GB SSD| 8GB內存
                              <br>
                              英特爾HD顯卡620含共享顯卡內存
                          </p>
                          <p class="price_p">¥6888.00</p>
                          <a href="#" class="a_title">查看詳情</a>
                      </div>
                      <img src="http://celinf.cn/study_computer_img2.png" alt="圖二">
                  </div>
              </div>
              <div id="b_div">
                  <div id="b_l_div">
                      <div id="top_div">
                          <img src="http://celinf.cn/computer_icon1.png" alt="圖三">
                          <span>電腦,辦公/1F</span>
                      </div>
                      <div class="c_div">
                          <p>電腦整機</p>
                          <ul>
                              <li><a href="#">筆記本</a></li>
                              <li><a href="#">游戲機</a></li>
                              <li><a href="#">臺式機</a></li>
                              <li><a href="#">一體機</a></li>
                              <li><a href="#">服務器</a></li>
                              <li><a href="#">聯想</a></li>
                          </ul>
                          <p>電腦配件</p>
                          <ul>
                              <li><a href="#">CPU</a></li>
                              <li><a href="#">SSD硬盤</a></li>
                              <li><a href="#">顯示器</a></li>
                              <li><a href="#">顯卡</a></li>
                              <li><a href="#">組裝電腦</a></li>
                              <li><a href="#">機箱</a></li>
                          </ul>
                          <p>外設/游戲</p>
                          <ul>
                              <li><a href="#">鍵盤</a></li>
                              <li><a href="#">鼠標</a></li>
                              <li><a href="#">U盤</a></li>
                              <li><a href="#">移動硬盤</a></li>
                              <li><a href="#">游戲設備</a></li>
                              <li><a href="#">智能單車</a></li>
                          </ul>
                      </div>
                  </div>
                  <div id="b_r_div">
                      <div class="s_list">
                          <img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
                          <p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
                          <p class="s_price">¥4600.00</p>
                          <a href="#" class="a_title s_title">查看詳情</a>
                      </div>
                      <div class="s_list">
                          <img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
                          <p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
                          <p class="s_price">¥4600.00</p>
                          <a href="#" class="a_title s_title">查看詳情</a>
                      </div>
                      <div class="s_list">
                          <img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
                          <p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
                          <p class="s_price">¥4600.00</p>
                          <a href="#" class="a_title s_title">查看詳情</a>
                      </div>
                  </div>
              </div>
          </div>
          </body>

          學習記錄,如有侵權請聯系刪除

          天給大家分享一款超全功能的跨瀏覽器平臺甘特圖表庫DHTMLXGantt

          dhtmlx-gantt DHTMLX公司開源的 JavaScript 甘特圖/橫道圖/條狀圖類庫。用來快速構建顯示項目、進度,和隨著時間關聯的相關進展情況。

          說明

          dhtmlx-Gantt 由位于俄羅斯圣彼得堡DHTMLX公司開發的甘特圖組件,適用于B/S模式的Web應用開發。被廣泛應用于項目管理、建筑、IT軟件、汽車等領域。

          快速創建

          <!DOCTYPE html>
          <html>
          <head>
          	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
          	<title>gantt demo</title>
          	<script src="dhtmlxgantt.js?v=6.0.0"></script>
          	<link rel="stylesheet" href="dhtmlxgantt.css?v=6.0.0">
          	<style>
          		html, body {
          			height: 100%;
          			padding: 0px;
          			margin: 0px;
          			overflow: hidden;
          		}
          	</style>
          </head>
          <body>
          <div id="gantt_here" style='width:100%; height:100%;'></div>
          <script>
          	var taskList = {
          		data: [
          			{
          				id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
          				progress: 0.4, open: true
          			},
          			{
          				id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
          				progress: 0.6, parent: 1
          			},
          			{
          				id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
          				progress: 0.6, parent: 1
          			}
          		],
          		links: [
          			{id: 1, source: 1, target: 2, type: "1"},
          			{id: 2, source: 2, target: 3, type: "0"}
          		]
          	};
          	
          	gantt.config.date_format = "%Y-%m-%d %H:%i";
          	gantt.init("gantt_here");
          	gantt.parse(taskList);
          </script>
          </body>
          </html>

          為了配置甘特圖所需外觀,dhtmlxGantt提供了2個對象 configtemplates

          gantt.config //日期,比例,控件等的配置選項。
          gantt.templates //格式化甘特圖中使用的日期和標簽的模板。
          • gantt.config 年示圖
          gantt.config.scale_unit = "year"; //按年顯示
          gantt.config.step = 1.5;	//設置時間刻度的步長(X軸)
          gantt.config.date_scale = "%Y";	//日期尺度按年
          
          gantt.init("gantt_here");

          • gantt.config 月示圖
          gantt.config.scale_unit = "month"; //按月顯示
          gantt.config.date_scale = "%F, %Y"; //設置時間刻度的格式(X軸) 多個尺度
          
          gantt.config.scale_height = 50; //設置時間刻度的高度和網格的標題
          
          gantt.config.subscales = [
          	{unit: "day", step: 1, date: "%j, %D"}
          ]; //指定第二個時間刻度
          
          gantt.init("gantt_here");

          • gantt.templates 可用于更改日期和標簽的顯示。
          gantt.templates.task_text=function(start,end,task){
          	return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.username;
          };
          gantt.init("gantt_here");

          官網提供了豐富的文檔示例。

          非常棒的一款開源甘特圖庫,可以讓你預測時間、成本、數量及質量上的關聯并回溯結果。也能幫助你考慮人力、資源、日期、項目中重復的要素和關鍵部分,讓你更加直觀的看到任務進展及資源的利用率等。

          # 官網地址
          https://dhtmlx.com/docs/products/dhtmlxGantt/
          
          # 倉庫地址
          https://github.com/DHTMLX/gantt

          好了,今天就介紹到這里。大家如果有其它不錯的甘特圖庫,歡迎一起交流討論!

          行文本展開收起是一個很常見的交互, 如下圖演示



          實現這一類布局和交互難點主要有以下幾點


          1. 位于多行文本右下角的“展開收起”按鈕
          2. “展開”和“收起”兩種狀態的切換
          3. 當文本不超過指定行數時,不顯示“展開收起”按鈕


          說實話,之前單獨看這個布局,即使借助 JavaScript 也不是一件容易的事啊(需要計算文字寬度動態截取文本,vue-clamp 就是這么做的),更別說下面的交互和判斷邏輯了,不過經過我的一番琢磨,其實純 CSS 也能完美實現的,下面就一步一步來看看如何實現吧~



          一、位于右下角的“展開收起”按鈕


          很多設計同學都喜歡這樣的設計,把按鈕放在右下角,和文本混合在一起,而不是單獨一行,視覺上可能更加舒適美觀。先看看多行文本截斷吧,這個比較簡單


          1. 多行文本截斷


          假設有這樣一個 html 結構


          <div class="text">
            浮動元素是如何定位的
          正如我們前面提到的那樣,當一個元素浮動之后,它會被移出正常的文檔流,然后向左或者向右平移,一直平移直到碰到了所處的容器的邊框,或者碰到另外一個浮動的元素。
          </div>


          多行文本超出省略大家應該很熟悉這個了吧,主要用到用到 line-clamp ,關鍵樣式如下


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



          1. 右下角環繞效果


          提到文本環繞效果,一般能想到 浮動 float ,沒錯,千萬不要以為浮動已經是過去式了,具體的場景還是很有用的。比如下面放一個按鈕,然后設置浮動


          <div class="text">
            <button class="btn">展開</button>
            浮動元素是如何定位的
          正如我們前面提到的那樣,當一個元素浮動之后,它會被移出正常的文檔流,然后向左或者向右平移,一直平移直到碰到了所處的容器的邊框,或者碰到另外一個浮動的元素。
          </div>


          .btn {
            float: left;
            /*其他裝飾樣式*/
          }



          如果設置右浮動


          .btn {
            float: right;
            /*其他裝飾樣式*/
          }



          這時已經有了環繞的效果了,只是位于右上角,如何將按鈕移到右下角呢?先嘗試一下 margin


          .btn {
            float: right;
            margin-top: 50px;
            /*其他裝飾樣式*/
          }



          可以看到,雖然按鈕到了右下角,但是文本卻沒有環繞按鈕上方的空間,空出了一大截,無能為力了嗎?


          雖然 margin 不能解決問題,但是整個文本還是受到了浮動按鈕的影響,如果有多個浮動元素會怎么樣呢?這里用偽元素來 ::before 代替


          .text::before{
            content: '';
            float: right;
            width: 10px;
            height: 50px;/*先隨便設置一個高度*/
            background: red
          }



          現在按鈕到了偽元素的左側,如何移到下面呢?很簡單,清除一下浮動 clear: both; 就可以了


          .btn {
            float: right;
            clear: both;
            /*其他裝飾樣式*/
          }



          可以看到,現在文本是完全環繞在右側的兩個浮動元素了,只要把紅色背景的偽元素寬度設置為0(或者不設置寬度,默認就是 0),就實現了右下角環繞的效果


          .text::before{
            content: '';
            float: right;
            width: 0; /*設置為0,或者不設置寬度*/
            height: 50px;/*先隨便設置一個高度*/
          }



          1. 動態高度


          上面雖然完成了右下加環繞,但是高度是固定的,如何動態設置呢?這里可以用到 calc 計算,用整個容器高度減去按鈕的高度即可,如下


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


          很可惜,好像并沒有什么效果,打開控制臺看看,結果發現 calc(100% - 24px) 計算高度為 0



          原因其實很容易想到,就是 高度 100% 失效 的問題,關于這類問題網上的分析有很多,通常的解決方式是給父級指定一個高度,但是這里的高度是動態變化的,而且還有展開狀態,高度更是不可預知,所以設置高度不可取。


          除此之外,其實還有另一種方式,那就是利用 flex 布局。大概的方法就是在 flex 布局的子項中,可以通過百分比來計算變化高度,具體可參考 w3.org 中關于 css-flexbox 的描述


          If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.


          因此,這里需要給 .text 包裹一層,然后設置 display: flex


          <div class="wrap">
            <div class="text">
              <button class="btn">展開</button>
              浮動元素是如何定位的
            正如我們前面提到的那樣,當一個元素浮動之后,它會被移出正常的文檔流,然后向左或者向右平移,一直平移直到碰到了所處的容器的邊框,或者碰到另外一個浮動的元素。
            </div>
          </div>


          .wrap{
            display: flex;
          }


          實踐下來,display: grid 和 display: -webkit-box 同樣有效,原理類似


          這樣下來,剛才的計算高度就生效了,改變文本的行數,同樣位于右下角~




          除此之外,動態高度也可以采用負的 margin 來實現(性能會比 calc 略好一點)


          .text::before{
            content: '';
            float: right;
            width: 0;
            /*height: calc(100% - 24px);*/
            height: 100%;
            margin-bottom: -24px;
          }


          到這里,右下角環繞的效果就基本完成,省略號也是位于展開按鈕之前的,完整代碼可以查看 codepen 右下角多行展開環繞效果


          4.其他瀏覽器的兼容處理


          上面的實現是最完美的處理方式。原本以為兼容性沒什么大問題的,畢竟只用到了文本截斷和浮動,-webkit-line-clamp 雖然是 -webkit- 前綴,不過 firefox 也是支持的,打開一看傻了眼,safarifirefox 居然全亂了!



          這就有點難受了,前面那么多努力都白費了嗎?不可能不管這兩個,不然就只能是 demo 了,無法用于生產環境。


          趕緊打開控制臺看看是什么原因。一番查找,結果發現是 display: -webkit-box !設置該屬性后,原本的文本好像變成了一整塊,浮動元素也無法產生環繞效果,去掉之后浮動就正常了



          那么問題來了:沒有 display: -webkit-box 怎么實現多行截斷呢 ?


          其實上面的努力已經實現了右下角環繞的效果,如果在知道行數的情況下設置一個最大高度,是不是也完成了多行截斷呢?為了便于設置高度,可以添加一個行高 line-height,如果需要設置成3行,那高度就設置成 line-height * 3


          .text {
            /*
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            */
            line-height: 1.5;
            max-height: 4.5em;
            overflow: hidden;
          }


          為了方便更好的控制行數,這里可以把常用的行數通過屬性選擇器獨立出來(通常不會太多),如下


          [line-clamp="1"] {
            max-height: 1.5em;
          }
          [line-clamp="2"] {
            max-height: 3em;
          }
          [line-clamp="3"] {
            max-height: 4.5em;
          }
          ...


          <!--3行-->
          <div class="text" line-clamp="3">
          ...
          </div>
          <!--5行-->
          <div class="text" line-clamp="5">
           ...
          </div>



          可以看到基本上正常了,除了沒有省略號,現在加上省略號吧,跟在展開按鈕之前就可以了,可以用偽元素實現


          .btn::before{
            content: '...';
            position: absolute;
            left: -10px;
            color: #333;
            transform: translateX(-100%)
          }



          這樣,SafariFirefox 的兼容布局基本上就完成了,完整代碼可以查看 codepen 右下角多行展開環繞效果(全兼容)


          二、“展開”和“收起”兩種狀態

          提到 CSS 狀態切換,大家都能想到 input type="checkbox" 吧。這里我們也需要用到這個特性,首先加一個 input ,然后把之前的 button 換成 label ,并且通過 for 屬性關聯起來


          <div class="wrap">
            <input type="checkbox" id="exp">
            <div class="text">
              <label class="btn" for="exp">展開</label>
              浮動元素是如何定位的
            正如我們前面提到的那樣,當一個元素浮動之后,它會被移出正常的文檔流,然后向左或者向右平移,一直平移直到碰到了所處的容器的邊框,或者碰到另外一個浮動的元素。
            </div>
          </div>


          這樣,在點擊 label 的時候,實際上是點擊了 input 元素,現在來添加兩種狀態,分別是只顯示 3 行和不做行數限制


          .exp:checked+.text{
            -webkit-line-clamp: 999; /*設置一個足夠大的行數就可以了*/
          }


          兼容版本可以直接設置最大高度 max-height 為一個較大的值,或者直接設置為 none


          .exp:checked+.text{
            max-height: none;
          }



          這里還有一個小問題,“展開”按鈕在點擊后應該變成“收起”,如何修改呢?


          有一個技巧,凡是碰到需要動態修改內容的,都可以使用偽類 content 生成技術,具體做法就是去除或者隱藏按鈕里面的文字,采用偽元素生成


          <label class="btn" for="exp"></label><!--去除按鈕文字-->


          .btn::after{
            content:'展開' /*采用content生成*/
          }


          添加 :checked 狀態


          .exp:checked+.text .btn::after{
            content:'收起'
          }


          兼容版本由于前面的省略號是模擬出來的,不能自動隱藏,所以需要額外來處理


          .exp:checked+.text .btn::before {
              visibility: hidden; /*在展開狀態下隱藏省略號*/
          }




          基本和本文開頭的效果一致了,完整代碼可以查看 codepen 多行展開收起交互,兼容版本可以查看 codepen 多行展開收起交互(全兼容)


          還有一點,如果給 max-height 設置一個合適的值,注意,是合適的值,具體原理可以參考CSS 奇技淫巧:動態高度過渡動畫,還能加上過渡動畫


          .text{
            transition: .3s max-height;
          }
          .exp:checked+.text{
            max-height: 200px; /*超出最大行高度就可以了*/
          }




          三、文本行數的判斷


          上面的交互已經基本滿足要求了,但是還是會有問題。比如當文本較少時,此時是沒有發生截斷,也就是沒有省略號的,但是“展開”按鈕卻仍然位于右下角,如何隱藏呢?



          通常 js 的解決方式很容易,比較一下元素的 scrollHeightclientHeight 即可,然后添加相對應的類名。下面是偽代碼


          if (el.scrollHeight > el.clientHeight) {
            // 文本超出了
            el.classList.add('trunk')
          } 


          那么,CSS 如何實現這類判斷呢?


          可以肯定的是,CSS 是沒有這類邏輯判斷,大多數我們都需要從別的角度,采用 “障眼法”來實現。比如在這個場景,當沒有發生截斷的時候,表示文本完全可見了,這時,如果在文本末尾添加一個元素(紅色小方塊),為了不影響原有布局,這里設置了絕對定位


          .text::after {
              content: '';
              width: 10px;
              height: 10px;
              position: absolute;
              background: red;
          }



          可以看到,這里的紅色小方塊是完全跟隨省略號的。當省略號出現時,紅色小方塊必定消失,因為已經被擠下去了,這里把父級 overflow: hidden 暫時隱藏就能看到是什么原理了



          然后,可以把剛才這個紅色的小方塊設置一個足夠大的尺寸,并且降低透明度,比如 100% * 100%


          .text::after {
              content: '';
              width: 100%;
              height: 100%;
              position: absolute;
              background: red;
          }




          可以看到,紅色的塊塊把右下角的都覆蓋了,現在把背景改為白色(和父級同底色),父級 overflow: hidden 重新加上


          .text::after {
              content: '';
              width: 100%;
              height: 100%;
              position: absolute;
              background: #fff;
          }



          現在看看點擊展開的效果吧



          現在展開以后,發現按鈕不見(被剛才那個偽元素所覆蓋,并且也點擊不了),如果希望點擊以后仍然可見呢?添加一下 :checked 狀態即可,在展開時隱藏覆蓋層


          .exp:checked+.text::after{
              visibility: hidden;
          }


          這樣,就實現了在文字較少的情況下隱藏展開按鈕的功能



          最終完整代碼可以查看 codepen 多行展開收起自動隱藏,兼容版本可以查看 codepen 多行展開收起自動隱藏(全兼容)


          需要注意的是,兼容版本可以支持到 IE 10+(這就過分了啊,居然還支持 IE),但是由于 IE 不支持 codepen,所以測試 IE 可以自行復制在本地測試。



          四、總結和說明


          總的來說,重點還是在布局方面,交互其實相對容易,整體實現的成本其實是很低的,也沒有比較生僻的屬性,除了布局方面 -webkit-box 貌似有點 bug (畢竟是-webkit-內核,火狐只是借鑒了過來,難免有些問題),幸運的是可以通過另一種方式實現多行文本截斷效果,兼容性相當不錯,基本上全兼容(IE10+),這里整理一下實現重點


          1. 文本環繞效果首先考慮 浮動 float
          2. flex 布局子元素可以通過百分比計算高度
          3. 多行文本截斷還可以結合文本環繞效果用 max-height 模擬實現
          4. 狀態切換可以借助 checkbox
          5. CSS 改變文本可以采用偽元素生成
          6. 多利用 CSS 遮擋“障眼法”


          多行文本展開收起效果可以說是業界一個老大難的問題了,有很多 js 解決方案,但是感覺都不是很完美,希望這個全新思路的 CSS 解決方式能給各位帶來不一樣的啟發,感謝閱讀,歡迎點贊、收藏、轉發~


          References

          [1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh

          [2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch

          [3] codepen 右下角多行展開環繞效果: https://codepen.io/xboxyan/pen/ExWaBJO

          [4] codepen 右下角多行展開環繞效果(全兼容): https://codepen.io/xboxyan/pen/dyvYNxr

          [5] codepen 多行展開收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ

          [6] codepen 多行展開收起交互(全兼容): https://codepen.io/xboxyan/pen/OJpypmR

          [7] CSS 奇技淫巧:動態高度過渡動畫: https://github.com/chokcoco/iCSS/issues/91

          [8] codepen 多行展開收起自動隱藏: https://codepen.io/xboxyan/pen/eYvNvYK

          [9] codepen 多行展開收起自動隱藏(全兼容): https://codepen.io/xboxyan/pen/LYWpWzK


          主站蜘蛛池模板: 精品国产一区二区三区麻豆| 人妻视频一区二区三区免费| 精品无码一区二区三区电影| 国产一区二区三区福利| 国产精品乱码一区二区三区| 午夜AV内射一区二区三区红桃视| 色偷偷av一区二区三区| 国产一区二区在线观看app| 日韩一区二区三区不卡视频| 日本无卡码一区二区三区| 色偷偷av一区二区三区| 日韩精品无码一区二区三区四区 | 日本一区二区三区精品中文字幕| 精品国产一区二区三区久| 伊人色综合一区二区三区影院视频| 久久高清一区二区三区| 夜夜嗨AV一区二区三区| 无码毛片一区二区三区中文字幕 | 日本免费一区尤物| 蜜桃AV抽搐高潮一区二区| 亚洲国产系列一区二区三区| 精品无码一区二区三区在线| 亚洲av日韩综合一区二区三区| 国产精品香蕉一区二区三区 | 亚洲一区二区三区偷拍女厕| 91一区二区三区| 精品视频一区二区三区免费| 亚洲AV无码一区二区二三区软件 | 一区二区三区四区在线播放| 亚洲AⅤ视频一区二区三区| 熟女性饥渴一区二区三区| 99精品国产高清一区二区三区| 久久精品一区二区三区不卡| 无码国产精品一区二区免费16 | 精品无码人妻一区二区三区18| 精品国产亚洲一区二区三区在线观看 | 亚洲av午夜福利精品一区| 亚洲午夜电影一区二区三区 | 高清一区二区三区视频| 久久免费视频一区| 亚洲一区二区三区高清|