css部分样式 设计

1.实现单行文本溢出省略

　　　实现方式：　overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

2.实现多行文本溢出省略（适用于webkit浏览器和移动端）

　　实现方式：

　　　　　　display:-webkit-box;

　　　　　　-webkit-line-clamp:2;

　　　　　　-webkit-box-orient:vertical;

　　　　　　overflow:hidden;

　　注：-webkit-line-clamp:n;  (n是数值，表示行数），限制块级元素的文本行数。

　　　　display:-webkit-box;  将对象作为弹性伸缩盒子。

　　　　-webkit-box-orient: 设置或检索对象的子元素的排列方式。

　　多行溢出省略 适用更广的方法：原理是强制于末尾添加省略号

　　　　如：p{position:relative;line-height:20px;max-height:60px;overflow:hidden}

　　　　　　p:after{content:'...';position:position;bottom:0;right:0;padding-left:40px;

　　　　　　　　　　background:-webkit-linear-gradient(left, transparent, #fff 55%);

　　　　　　　　　　background:-moz-linear-gradient(left ,transparent ,#fff  55%);

　　　　　　　　　　background:-o-linear-gradient(left, transparent ,#fff 55%);

　　　　　　　　　　background:linear-gradient(left, transparent, #fff 55%);}

　　　　兼容IE6-7 不能用伪类:after ，添加(<span>...</span>) 

3.负边距

　　适用场景：

　　　　　　1）当要将一行均分出几个盒子，且盒子都有外边距，最右边的盒子不显示外边距，这时就可以用负边距   margin-right:-10px;

　　　　　　2)两行排列，左边自动，右边固定，

　　　　　　3）三行排列，中间固定，两边自动