清除浮动，单行多行超出用...

1.额外标签法

<div style="clear:both;"></div>

2.父级添加Overflow属性

3.使用after伪元素清除浮动

.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}

4.使用before和after双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix{*zoom:1;}

超出部分用...（单行）

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

超出部分用...（多行）

{
overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
/*!autoprefixer:off*/
-webkit-box-orient:vertical;
/*autoprefixer:on*/
}

<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ellipsis2, .ellipsis3, .ellipsis4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .ellipsis2 {
    -webkit-line-clamp: 2
  }

  .ellipsis3 {
    -webkit-line-clamp: 3
  }

  .ellipsis4 {
    -webkit-line-clamp: 4
  }

  .container {
    width: 50%;
    margin: auto;
  }
</style>