项目经验之一《常用CSS技巧》 超出部分隐藏 | 水平滚动 | 绝对定位实现居中对齐|css渐变动画|改变PNG图标颜色|分享社媒|去掉youtueb推荐视频|禁用右键

1.css超出2行隐藏并用...表示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

如果多行隐藏失效。是因为默认编译的时候，会过滤 

-webkit-box-orient: vertical;

改变方式，关闭 autoprefixer 然后再开启：用注释就可以做到

代码：

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

 

2.水平滚动条

    display: inline-block;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 0px;

3.绝对定位实现水平和垂直居中

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

4.CSS渐变动画（定义动画，使用动画）

 

定义动画

@keyframes hideIndex {
    0