Hide text when doesn't fit (force wrap).

by rgthree

HTML

<div class="hblCommonFlex_ hblColoredBarCell_">
    <div class="hblColoredBar_" style="width: 31.547619047619047%; background-color: #85c744" title="106">1,060</div>
    <div class="hblColoredBar_" style="width: 5.9523809523809526%; background-color: #fdce00" title="20">20</div>
    <div class="hblColoredBar_" style="width: 2.880952380952381%; background-color: #ff5b5b" title="5">5</div>
    <div class="hblColoredBar_" style="width: 61.01190476190476%; background-color: #aaa" title="205">205,000,000</div>
</div>

CSS

.hblCommonFlex_ {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.hblColoredBarCell_ {
    min-height: 18px;
    height: 100%;
    width: 100%;
}

/* The following rules are altered/added. */

.hblColoredBar_ {
    font-weight: bold;
    text-align: center;
    /* Define the height, and make overflow hidden. */
    overflow: hidden;
    height: 18px;
}

/* Add a before pseudo-element so with a space so it wraps naturally. */
.hblColoredBar_::before {
    content: '. ';
    color: transparent;
    font-size: 0;
    /* These two rules are only necessary if the height
       of the .hblColoredBar_ is greater than the character's line height. */
    display: inline-block;
    height: 100%; 
}