There are different CSS flex for browsers. This should work for IE: HTML
<button>
<div class="container">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
<span>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span>
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
</button>
CSS
body, button {
max-width: 100px;
}
.container {
width: 100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
span {
flex: 1;
-ms-flex: 1 0 auto;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
Jsfiddle work: https://jsfiddle.net/fu6kfhw9/7/
, IE .