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小时内与您取得联系。

整合营销服务商