css文字折行自适应行高

使文字始终保持相对垂直居中。使用table可以满足需求。伸缩浏览器也可保持布局。

 

 <table>
    <tr>
      <td class="label">杆位名称</td>
      <td class="value">TH000-品质管理</td>
      <td class="label">杆位编号</td>
      <td class="value">工程一</td>
      <td class="label">所属派出所</td>
      <td class="value">班组一</td>
    </tr>
    <tr>
      <td class="label">取电类型</td>
      <td class="value">xxxxx作业</td>
      <td class="label">所属项目</td>
      <td class="value">定常</td>
      <td class="label">摄像机数量<br /></td>
      <td class="value">
        《xxxxxxxxx作业要领书加上金卡和雕刻机哈师大客家话健康尽快哈开机和》
      </td>
    </tr>
  </table>

 

 

table {
  width: 100%;
  margin: 10px 0;
  border: 1px solid #eeeeee;
  background: #ffffff;
  border-collapse: collapse;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3c456c;
  tr {
    .label {
      text-align: center;
      background: #f9fafb;
      width: 110px;
      height: 50px;
      border: 1px solid #eeeeee;
      word-break: break-all;
      word-wrap: break-word;
      line-height: initial;
    }
    .value {
      text-align: left;
      background: #ffffff;
      border-bottom: 1px solid #eeeeee;
      min-height: 50px;
      min-width: 200px;
      padding: 0 10px;
      box-sizing: border-box;
      word-break: break-all;
      word-wrap: break-word;
      line-height: initial;
    }
  }
}

 

参考链接：

如何给table加边框：https://www.cnblogs.com/sheldormhh/p/10302695.html

flex弹性布局：https://www.cnblogs.com/hellocd/p/10443237.html