zerojs

实战踩坑

css

* @Description:

返回目录

<!--

  • @Description:
  • @Author: Huang junbang
  • @Date: 2019-11-12 10:09:45
  • @LastEditTime : 2020-02-12 18:29:13
  • @LastEditors : Huang junbang

    • -->

1. 文字溢出省略号

  1. 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
  1. 多行
h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  &:hover {
    overflow: auto;
    white-space: normal;
  }
}
p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  &:hover {
    overflow: auto;
    white-space: normal;
  }
}

2. 让图片保持宽高1:1

  .flod--img {
    width: 30%;
    // height: 0;
    // padding-bottom: 30%;
    margin: 5px calc(10% / 6);
    .image__bd {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 1px 1px 2px #eeeeee;
        border-radius: 5px;
      }
    }
  }

3. td中嵌套table，怎样让table完全填充父td高度宽度相

给外层td设置一个高度
里面的table设置height:100%

<table>
  <tr>
    <td style='height:50px'>
      <table>
         <tr>
            <td style='height:100%'>
           
            </td>
         </tr>
      </table>
    </td>
  </tr>
</table>

4. -