Html中Css樣式Ⅱ

素的定位（方式五種定位方式）:

靜態定位: position:static;
相對定位: position:relative;
絕對定位: position:absolute;
固定定位: position: fixed;
浮動定位: 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個對象 config和templates。

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

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

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

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

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

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

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

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

多行文本截斷

假設有這樣一個 html 結構

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

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

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

右下角環繞效果

提到文本環繞效果，一般能想到 浮動 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;/*先隨便設置一個高度*/
}

動態高度

上面雖然完成了右下加環繞，但是高度是固定的，如何動態設置呢？這里可以用到 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 也是支持的，打開一看傻了眼，safari 和 firefox 居然全亂了！

這就有點難受了，前面那么多努力都白費了嗎？不可能不管這兩個，不然就只能是 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%)
}

這樣，Safari 和 Firefox 的兼容布局基本上就完成了，完整代碼可以查看 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 的解決方式很容易，比較一下元素的 scrollHeight 和 clientHeight 即可，然后添加相對應的類名。下面是偽代碼

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+），這里整理一下實現重點

文本環繞效果首先考慮 浮動 float
flex 布局子元素可以通過百分比計算高度
多行文本截斷還可以結合文本環繞效果用 max-height 模擬實現
狀態切換可以借助 checkbox
CSS 改變文本可以采用偽元素生成
多利用 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

在線咨詢

上一篇：讓廣告創意程序化，喝彩網獲2000萬A輪融資
下一篇：前端入門-html 列表

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商