文本省略 + 导航栏处理

单行省略

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行文本溢出显示省略号

适用于Webkit浏览器及移动端

p{
display: -webkit-box;       /*弹性伸缩盒子模型*/
-webkit-box-orient:vertical;        /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp:3;      /*限制一个块元素显示文本的行数*/
overflow: hidden;
}

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}  
/*ax-height是line-height的整数倍，不切割字体*/
p::after{
            content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
            background: -webkit-linear-gradient(left, transparent, #fff 55%);
            background: -o-linear-gradient(right, transparent, #fff 55%);
            background: -moz-linear-gradient(right, transparent, #fff 55%);
            background: linear-gradient(to right, transparent, #fff 55%);
}

导航栏的特殊处理

::-webkit-scrollbar{width:16px;height:16px;}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb{border-radius:999px;border:4px solid transparent;}
::-webkit-scrollbar-track{box-shadow:1px 1px 5px rgba(185,165,150,.2) inset;}
::-webkit-scrollbar-thumb{min-height:20px;background-clip:content-box;box-shadow: 0 0 0 5px rgba(185,165,150,1) inset;}
::-webkit-scrollbar-corner{/*background:transparent;*/}