效果: 超出字数自动换行
<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;
}
}