CSS-Tricks (一)

1. 在一行中，如何让文字垂直居中？

<style>
  .text {
    height:50px;
    line-height:50px;
  }
</style>

demo在这里

2. 超出内容用省略号显示

多行

<style>
    .text{
      display:-webkit-box;  //必需
      width:400px;
      height: 96px;  //算出来的，font-size * line-height * -webkit-line-clamp
      margin: 0 auto;
      border:1px solid red;
      font-size:16px;
      line-height:1.5;  //这里不能用像素
      -webkit-line-clamp: 4;  //设定展示的行数
      -webkit-box-orient:vertical;  //设置方向
      overflow:hidden;  //必需
      text-overflow:ellipsis;  //必需
    }
  </style>

demo在这里

单行

.text {
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
}

demo在这里

3. 如何消除inline-block之间的间隙(两种方法)

父级元素font-size:0; 子级元素font-size:16px;

.parent{
      font-size:0;
    }
    span{
      display:inline-block;
      font-size:16px;
      border:1px solid blue;
    }

demo在这里

第二种办法：把两个inline-block标签写到一行，不要折行

<span>小明</span><span>小华</span>

demo在这里

4. 背景模糊的实现方法

思路：给相应的div再添加一个div，绝对定位，宽高100%，z-index:-1; 添加背影图片后用filter:blur做出模糊效果，对于模糊超出的部分用overflow:hidden；来隐藏

<style>
    .parent{
      position:relative;
      width:256px;
      height:256px;
      overflow:hidden;
      background-color:rgba(0,0,0,0.25);  //黑色遮罩
    }
    .child{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      filter:blur(10px);  //滤镜效果
      z-index:-1;    //这一步很重要
    }
    .child > img{
      width:100%;
      height:100%;
    }
  </style>

  <body>
    <div class="parent">
      <div class="child">
        ![](xxx)  //这里要用img标签，不要用background-image，因为放在vue不好用bind绑定
      </div>
    </div>
  </body>

demo在这里

5.如何让一行文字和边上的小图片居中对齐？

思路：这个很乱，要看具体情况，一般来说，一行字和个小图标的话，使用vertical-align:top; line-height再设置成与图片高度一样即可;如果图片过大,可以将文字也设置成vertical-align:top;line-height:1;然后再算一下用margin-top来实现垂直居中。图片过小也可以这样弄。

这个方法挺重要，要牢记！

demo在这里
 demo

CSS-Tricks (一)

CSS-Tricks (一)

1. 在一行中，如何让文字垂直居中？

2. 超出内容用省略号显示

3. 如何消除inline-block之间的间隙(两种方法)

4. 背景模糊的实现方法

5.如何让一行文字和边上的小图片居中对齐？

6.记住，line-height在微调使文字垂直居中时非常有用！！！

推荐阅读更多精彩内容