在省内的第二个跨度上的CSS省略号

Question

我有以下html（IE8 +），如果div的大小变小，我想用省略号显示文本。应显示按钮，直到空间可用。此外，按钮需要显示在文本旁边，并且不能向右浮动，文本的大小因语言而异。

到目前为止，我已尝试过flex-box和@media，但IE8不支持这些功能。

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

使用以下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