<div class="layout4">
<div class="floatContent">
超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字
</div>
<div class="floatFix">
定长文字
</div>
</div>
@contentWidth:100px;
@contentMarginRight: 20px;
@minusNumber: @contentWidth + @contentMarginRight;
.layout4{
width: 30%;
background: red;
overflow: hidden;
.floatContent{
width: calc(~"100% - @{minusNumber}");
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
float: left;
}
.floatFix{
float: right;
text-align:right;
width: contentWidth;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.