ディスプレイのフレックス使用時にボタンのテキストが表示されない（IEのみ）

Question

htmlでは、2つのアイコンとテキストのスパンを含むボタンがあります。 CSSでは、長すぎるとテキストを切り詰めるためにflexとoverflowのプロパティを使用します。このコードはIE以外のすべてのブラウザで正常に動作します。 https://jsfiddle.net/fu6kfhw9/1/

HTML

<button> 
    <div class="container"> 
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i> 
    <span>TestTestTestTest</span> 
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i> 
    </div> 
</button> 

CSS事前に

body, button { 
    max-width: 100px; 
} 

.container { 
    width: 100%; 
    display: flex; 

    span { 
    flex: 1; 
    overflow: hidden; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 
} 

おかげで、 マーク

Answer 1

のflexプロパティは削除できます。

fiddle

body, 
 
button { 
 
    max-width: 100px; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
span { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<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>

Answer 2

は、ブラウザごとに異なるCSSフレックス」があります。 はここjsfiddle上の例です。この1は、IEのために働く必要があります：あなたはしかし、すべて異なるが曲がる削除して、普通の1を維持することができるかもしれないhttps://jsfiddle.net/fu6kfhw9/7/

： 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をとIE 1。

Answer 3

あなたはフレキシボックスを維持したい場合は、スパンのために一定の幅を設定することができます。

body, button { 
    max-width: 100px; 
} 

.container { 
    width: 100%; 
    display: flex; 
    display: -ms-flexbox; /* ie Flex */ 

    span { 
    flex: 1; 
    -ms-flex: 1 0 auto; /* ie Flex */ 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    width: 50px; /* fix width of span */ 
    } 
} 

https://jsfiddle.net/fu6kfhw9/10/

を