标签搜索

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

sunshine
2022-09-19 / 0 评论 / 242 阅读

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>
感觉很棒,欢迎点赞 OR 打赏~
3
分享到:

评论 (0)

取消
0:00