2018-08-14

CSS小技巧

#小技巧

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
div{
  border:1px solid;
  font-size:20x;
}

span{
  border:1px solid red;
  display: inline-block;
  text-align:justify;
  width:100px;
  line-height: 20px;
  overflow: hidden;
  height: 20px;
}

span:after{
  content:" ";
  display: inline-block;
  width:100%;
  border:1px solid blue;
}
</style>
</head>
<body>
   <div>
     <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;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
<div>
  1     3  4  5  6  7  8  9  0  -  1     2  3 4  5  6  7  8  90  -  1       3  4  
  6  7  8  90  -  1     2  3  4  5  6  7  8  9  0  -
</div>
</body>
</html>