CODEWITHSUNDEEP
htmlcss
Bryan
Bryan

Reputation: 63

How do I force a specific child element to resize on overflow?

I have 3 tags inside of a div, and I'd like to force a particular element of those three to shrink when the parent div does and the other 2 to remain visible and not shrink (specifically, I'd like to make the number overflow with an ellipsis and allow the icon and the currency label to always be visible. Is there any elegant way to do this? Thanks!

See 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;
}

Change the max-width of the div to simulate the kind of resizing I'm refering to

Upvotes: 2

Views: 957

Answers (1)

darrylyeo
darrylyeo

Reputation: 3473

CSS Flexbox to the rescue! Note that overflow: hidden should be applied to the element with text-overflow for it to work.

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>

Upvotes: 2

Related Questions