实战项目强制标题省略css高级样式解决方案
Vue ShanLing（闪灵科技）开发者团队介绍：在实际开发项目中非常实用的前端操作手法，实战项目强制标题省略css高级样式解决方案，简洁式代码如下列展示：
1、 元素隐藏与显示
1.1 display: none （重点）
display: none 元素隐藏 (隐藏之后不保留原来位置） display: block 除了转化为块级元素外，还有显示元素的意思。
特点：隐藏之后不再保留位置
1.2 visibility可见性 （了解）
visibility: visible; 对象可见 visibility: hidden; 对象隐藏 (隐藏之后继续保留原来位置）
1.3 overflow 溢出（重点）
可能的值 – visible 默认值。内容不会被修剪，会呈现在元素框之外。 – hidden 内容会被修剪，并且其余内容是不可见的。 – scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。不管内容超不超出都出滚动条（太丑了，一般不用） – auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。（太丑了，一般不用）
2、
2.1元素隐藏如下列代码写法：
思路：原来盒子里面装有一个黑色半透明盒子，刚开始看不见，当鼠标经过时，这个黑色半透明盒子就显示出来。 可以将有播放按钮的盒子作为子盒子，没有播放按钮的作为父盒子，用“父绝子相”定位，然后把子盒子隐藏。等鼠标悬浮父盒子时显示
<body><div class=”box”>
<a href=”#”>
<div class=”mask”></div>
<img src=”img/zhangsan.png”>
</a> </div></body><style type=”text/css”>
/*强制一行显示*/ white-space: nowrap;
/*超出部分隐藏*/ overflow: hidden;
/*省略号提到超出隐藏部分*/ text-overflow: ellipsis;
/*实例代码超出隐藏*/ *text-overflow: ellipsis; white-space: nowrap;overflow: hidden;
