文字溢出省略文本对齐垂直居中margin合并

文本超出溢出以及如何添加省略号

一行文本

默认情况下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
     width:100px;
     border: 1px solid red;
      
     /* white-space:nowrap; */   /*不换行，超出div宽度的文字溢出*/
     /* overflow:hidden; */         /* 超出宽度部分自动隐藏 */
     /* text-overflow:ellipsis; */   /*超出部分变成省略号*/
  }
  </style>
</head>

<body>
  <div>
    hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii nihaoninnnn你好
  </div>
</body>

</html>

第一行没有换行是因为浏览器把它看成一个英文单词
所以从现象可以看出默认超出宽度是会换行的

不换行，超出div宽度的文字溢出

恢复white-space:nowrap; 这个属性

超出部分隐藏，超出部分变省略号

1 2	overflow:hidden; text-overflow:ellipsis;

多行文本

div{
     width:100px;
     border: 1px solid red;
      
     display: -webkit-box;
  -webkit-line-clamp: 3;   /*最多显示三行文本，超出就变省略号*/
  -webkit-box-orient: vertical;  
   overflow:hidden;
  }
  <div>
    hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii nihaoninnnn你好范德萨发热管杜莎夫人
  </div>

多行文本两端对齐

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    span{
  display:inline-block;
  width:4em;
  text-align:justify;   /*文本换行对齐*/
  font-size:20px;
  line-height:20px;
}
span::after{
  content:'';
  display:inline-block;
  width:100%;
}  
  </style>
</head>
<body>
  <div>
  <span>姓名</span> <br>
  <span>联系方式</span> <br>
  <span>炸弹人</span>
    </div>
</body>
</html>

文字垂直居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
   div{
     border: 1px solid red;
    line-height:30px;
    padding:5px 0
}
  </style>
</head>
<body>
  <div>
文字垂直居中
    </div>
</body>
</html>

遵循一条原则能不用height 就别用，用padding撑起想要的高度

容器垂直居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      box-sizing:border-box;
    }
    .dad{
      border: 2px solid blue;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .son{
      border:3px solid red;
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="dad">
    <div class="son">
      fdksfdlmks sdfefdsfdsfwef
      fdfwdfsefrf
      dfrefdreg
      fefdsgrdsfs
      fdefregr
      dgersd
      gre
      dfwe
      fd
      fe
      dfd
      erfrgrgfdsrgf
    </div>
  </div>
</body>
</html>

新时代前端记住这种用flex 布局来垂直居中，就好了

margin合并

两个div之间的margin合并

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{
      box-sizing:border-box;
    }
   .div1{
     border: 1px solid red;
     height:100px;
     margin:10px 0;
    }
    .div2{
      height:100px;
      border:1px solid green;
      margin:10px 0;
    }
  </style>
</head>
<body>
  <div class=div1></div>
  <div class=div2></div>
</body>
</html>

两个div 分别给了10px的margin
两个div之间的间距按照直觉应该是20px
通过开发者工具我们可以看到它们之间只有10px
这就说明他们的margin合并了

父子div的margin合并

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{
      box-sizing:border-box;
    }
    body{
      border: 1px solid blue;
    }
   .dad{
     outline: 1px solid red;
     margin:10px 0;
    }
    .son{
      height:100px;
      border:1px solid green;
      margin:20px 0;
    }
  </style>
</head>
<body>
  <div class=dad>
    <div class=son></div>
  </div>
</body>
</html>