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

我想得到的結果是截斷的文本，如果超過300像素長。

來源

2016-08-16 sashafierce

它支持IE 11及以上，點擊這裏：http://caniuse.com/#feat=flexbox –

任何想法如何獲得在IE 8-10中的行爲？ – sashafierce

根據您的要求，您可以使用display：block，爲什麼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

你試圖包裝它，或者，你試圖創建一個新的Web瀏覽器的單詞「-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他最大的寬度值，並觀察它很好！ bro – satwick

仍然無法在IE10中運行。 – sashafierce

Flexbox無法在IE10上工作

回答

相關問題