文本溢出后，隐藏显示"..."和margin边距重叠

一。隐藏加省略

单行文本：

1.  overflow: hidden;
2.  white-space: nowrap;
3.  text-overflow: ellipsis;

多行文本：

1. overflow: hidden;
2.  text-overflow: ellipsis;
3. display: -webkit-box;
4. -webkit-box-orient: vertical;
5. -webkit-line-clamp: 2; //是几行就填几

二。边距重叠

如果有两个div

<div class="d1"></div>
<div class="d2"></div>

1.d1:margin-bottom:20px;

   d2:margin-top:30px;    //d1和d2的边距为30px，取最大值

1.d1:margin-bottom:-20px;

   d2:margin-top:-30px;    //d1和d2的边距为-30px，取最小值

1.d1:margin-bottom:-20px;

   d2:margin-top:30px;    //d1和d2的边距为10px，取间距之和

如果是父子关系

 

<div class="w1">
        <div class="d1"></div>
</div>
<div class="w2">
        <div class="d2"></div>
</div>

 

1.di: margin-bottom:50px;

        w1:padding-bottom:0px;     //可以视为d1的margin-bottom发生了穿透，等效为 w1 的margin-bottom：50px;

2.di:margin-bottom:50px; 

  w1:padding-bottom>0,例如: padding-bottom:1px;      //等效为w1: padding-bottom：51px；，在box-sizing：content-box与border-box测试一致