Question

我在div中有3个标签，并且我希望强制这三个中的特定元素在父div执行时缩小，而另一个2保持可见而不缩小（具体来说，我＆＃39） ; d喜欢用省略号使数字溢出，并允许图标和货币标签始终可见。有没有优雅的方法来做到这一点？谢谢！

参见jsfiddle：https://jsfiddle.net/ugbpbj1v/

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="outer-box">
    <span class="inner-box">6,039,460.00</span>
    <div class="currency-label">USD</div>
    <i class="fa fa-caret-square-o-up icon"></i>
</div>

css：

.outer-box {
    max-width: 150px;
    max-height: 14px;
    overflow: hidden;
}

.inner-box {
    display: inline;
    text-overflow: ellipsis;
}

.currency-label {
    display: inline;
    }

.icon {
    display: inline;
}

更改div的最大宽度以模拟调整大小的类型我参考

Answer 1

CSS Flexbox救援！请注意，overflow: hidden应该应用于text-overflow元素才能生效。

JSFiddle

.outer-box {
    display: flex;
    max-width: 100px;
    max-height: 14px;
}
.outer-box > * {
    flex: 0 auto;
}
.inner-box {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

.currency-label {
    display: inline;
}

.icon {
    display: inline;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="outer-box">
    <span class="inner-box">6,039,460.00</span>
    <div class="currency-label">USD</div>
    <i class="fa fa-caret-square-o-up icon"></i>
</div>

如何强制特定子元素在溢出时调整大小？

1 个答案: