CSS小技巧及布局套路（持续更）

1、单行文本溢出省略

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

eg:

2、多行文本溢出省略

  div{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

eg:

3、文字左右两端对齐

span{
      display: inline-block;
      text-align: justify;
      overflow: hidden;
      width: 5em;
    }
span::after{
      content:'';
      display: inline-block;
      width: 100%;
    }

eg:

一篇关于CSS小技巧的博客：点击打开链接

布局套路：

1、Float布局

- 给儿子加上float: left;/float: right;

- 给爸爸加上 .clearfix的类

2、平均分布布局

几个div平局分布，中间需要20px的空隙

width: calc(33.333333% - 20px);  //使用cacl计算属性计算宽度
margin-right: 20px;  //将宽度减去的20px补在margin上

3、控制图片不要变形

不要用img标签，直接在图片对应区域加background

background: transparent url(图片地址) no-repeat center;
background-size: cover  //尽可能全地1比1展示图片