<div class="panel-content">
<div class="label-wrap">
<div class="label">label:</div>
</div>
<div class="value-wrap">
<div class="value">
<span class="text">
测试测试测试测试测试测试测试测试
</span>
</div>
</div>
</div>
.panel-content {
display: flex;
flex-wrap: nowrap;
.label {
white-space: nowrap;
}
.value-wrap {
flex-grow: 1;
}
.value {
width: 100%;
position: relative; /**关键点**/
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;/**关键点**/
width: 100%;
}
}
}
实现效果:左侧随着label字数多少伸缩,右侧溢出出现省略点点点...