详情页常用样式

效果: 超出字数自动换行

        <h4 class="h4Style">打卡详情信息</h4>
        <div style="padding-bottom:30px;">
          <!-- 第一行 -->
          <div class="box">
            <div class="inner">
              <span class="label">员工姓名：</span>
              <span class="content">{
   
   {detialData.realName}}</span>
            </div>
            <div class="inner m20">
              <span class="label">员工账号：</span>
              <span class="content">{
   
   {detialData.userCode}}</span>
            </div>
          </div>
          <!-- 第二行 -->
          <div class="box">
            <div class="inner">
              <span class="label">员工工号：</span>
              <span class="content">{
   
   {detialData.jobNumber}}</span>
            </div>
            <div class="inner m20">
              <span class="label">用户ID：</span>
              <span class="content">{
   
   {detialData.userId}}</span>
            </div>
          </div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
          <!-- 第六行 -->
          <div class="box">
            <div class="inner">
              <span class="label">流程ID：</span>
              <span class="content">{
   
   {detialData.processId}}</span>
            </div>
            <div class="inner m20">
              <span class="label">PS系统记录ID：</span>
              <span class="content">{
   
   {detialData.hrInterfaceKeyId}}</span>
            </div>
          </div>
          <!-- 地图的box -->
          <div class="outBox">
            <div class="ibox word">
              <div class="inner">
                <span class="label">定位标题：</span>
                <span class="content">{
   
   {detialData.title}}</span>
              </div>
              <div class="inner">
                <span class="label">详细地址：</span>
                <span class="content">{
   
   {detialData.address}}</span>
              </div>
            </div>
            <!-- 地图渲染的div -->
            <div class="ibox m20" id="imap">
            </div>       
          </div>
        </div>

style样式

  .m20 {
    margin-left:20px;
  }
  .box{
    line-height: 28px;
    display:flex;
    justify-content:flex-start;
    .inner{
      width: 50%;
      display: flex;
      .label {
        min-width: 90px;
      }
      .content {
        cursor: pointer;
        max-width: calc(100% - 90px);
        overflow: auto; 
        white-space: pre-wrap;
      }
    }
  }
 .outBox {
    display: flex;
    justify-content: flex-start;
    .ibox{
      width: 50%;
    }
    .word{
      .inner {
        display: flex;
        line-height: 28px;
        // width: unset;// 在ie浏览器不兼容
        width: 100%;
        .label {
          min-width: 90px;
        }
        .content {
          cursor: pointer;
          max-width: calc(100% - 90px);
          overflow: auto; 
          white-space: pre-wrap;
        }            
      } 
    }
    #imap {
      min-height: 131px;
      max-height: 300px;
      border: 1px solid #f0f2f5;
    }
  }