Flexbox无法在IE10上工作

Question

嗨以下代码在Chrome和Firefox中完美工作，但无法在IE中使用。我试过display: -ms-flexbox，但它没有帮助。

HTML：

<div class="contener"> 
    <span class="editableLabel"> 
    <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span> 
    </span> 
</div> 

CSS：

.contener { 
    width: 300px; 
} 

.editableLabel { 
    display: flex; 
} 

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

fiddle

我想得到的结果是截断的文本，如果超过300像素长。

Answer 1

.contener { 
 
    width: 300px; 
 
} 
 

 
.editableLabel { 
 
    display: flex; 
 
} 
 

 
.contentTrimmed { 
 
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
 
white-space: -pre-wrap;  /* Opera 4-6 */ 
 
white-space: -o-pre-wrap; /* Opera 7 */ 
 
white-space: pre-wrap;  /* css-3 */ 
 
word-wrap: break-word;  /* Internet Explorer 5.5+ */ 
 
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ 
 
word-break: break-all; 
 
white-space: normal; 
 

 

 
}

<div class="contener"> 
 
    <span class="editableLabel"> 
 
    <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span> 
 
    </span> 
 
</div>

Answer 2

.contener { 
 
     width: 300px; 
 
     } 
 

 
    .editableLabel { 
 
     display: flex; 
 
    } 
 

 
    .contentTrimmed { 
 
      display: inline-block; 
 
     text-overflow: ellipsis; 
 
     white-space: nowrap; 
 
     overflow: hidden; 
 
      max-width: 300px; 
 
     }

<div class="contener"> 
 
     <span class="editableLabel"> 
 
     <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span> 
 
     </span> 
 
    </div>