CSS文本省略与元素隐藏技巧-优快云博客

1 多行元素的文本省略号

/*只支持单行文本的溢出显示省略号,部分浏览器还需要加宽度*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
display:inline-block;

/*多行文本溢出显示省略号*/
overflow:hidden;
display:-webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
text-overflow:ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/
-webkit-line-clamp:2;
-webkit-box-orient:vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */

/*跨浏览器兼容的方案*/
p{
    position:relative;
    line-height: 1.4em;
    height: 4.2em;
    overflow: hidden;
}
p::after{
    content:" .. ";
    font-weight: bold;
    position:absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
    background: url(...) repeat-y;
}

2 隐藏

1、display:none
（1）浏览器不会生成属性为display: none;的元素。
（2）display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
（3）display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
（4）transition无效。
2、visibility:hidden
（1）元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
（2）visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。
（3）visibility: hidden;不会触发该元素已经绑定的事件。
（4）visibility: hidden;动态修改此属性会引起重绘。
（5）transition无效。
3、opacity:0;filter：alpha(opacity=0-100;（考虑浏览器兼容性的问题，最好两个都写上）
（1）opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。
（2）opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。
（3）opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。
（4）transition有效。
4、各种隐藏
{ display: none; /* 不占据空间，无法点击 / }
{ visibility: hidden; / 占据空间，无法点击 / }
{ opacity: 0; filter:Alpha(opacity=0); / 占据空间，可以点击 / }
{ position: absolute; top: -999em; / 不占据空间，无法点击 / }
{ position: relative; top: -999em; / 占据空间，无法点击 / }
{ position: absolute; visibility: hidden; / 不占据空间，无法点击 / }
{ height: 0; overflow: hidden; / 不占据空间，无法点击 / }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); / 不占据空间，可以点击 */ }