Flexbox не работает на IE10

Привет, следующий код отлично работает в Chrome и Firefox, но я не могу заставить его работать в IE. Я пробовал display: -ms-flexbox, но это не помогает.Flexbox не работает на IE10

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

Результат я хочу, чтобы получить это обрезается текст, если он больше, чем 300px.

источник

2016-08-16 sashafierce

поддерживаемых в IE 11 и выше, проверьте здесь: http://caniuse.com/#feat=flexbox –

Любая идея, как получить это поведение в IE 8-10? – sashafierce

в соответствии с вашими требованиями вы можете достичь этого с помощью дисплея: блок, почему flex, любая конкретная причина? –

.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>

источник

2016-08-16 09:53:06 satwick

он не работает даже в Chrome. – sashafierce

white-space: -webkit-pre-wrap; этот код есть ..i есть сделайте это crome, modizilla, IE9,10,11 и safari, – satwick

вы пытаетесь его обернуть или, пытаясь создать новый веб-браузер, слово «-webkit;» само по себе описывает, что для хром – satwick

.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>

источник

2016-08-16 10:36:34 satwick

сейчас проверьте это – satwick

изменить t его значение max-width и соблюдайте его штраф! bro – satwick

все еще не работает в IE10. – sashafierce

Flexbox не работает на IE10

ответ

Смежные вопросы