1

I have following html (IE8+) and would like to display text with ellipsis if the size of div becomes small. Button should display till the space is available. Also button needs to be displayed next to the text and can't be floated to the right and size of the text varies based in the language.

So far I have tried flex-box and @media but IE8 does not support these features. 

<div class="flex-div">
    <span class="text">variable text</span>
    <span class="button" >button</span>
</div>

With following CSS

.text {
    color: #000;
    min-width: 0;
    white-space: nowrap;
    display:inline-block;
    overflow: hidden;
    text-overflow:ellipsis; 
    padding: 2px 12px 1px 12px;
    vertical-align: middle;
}

.flex-div {
    float:left;
    line-height: 20px;
} 
.button {
    padding-top:2px;
    display:inline-block;
    font-family:Tahoma;
    font-size:8pt;
    color:#1B439F;
    border-bottom: 1px dotted #FF9900;
    cursor:pointer;
    vertical-align: middle;
    white-space:nowrap;
    overflow:visible;
}

Fiddle

Anonymous Me
  • 1,108
  • 2
  • 9
  • 26

0 Answers0