Flexbox 无法在 IE10 上运行答案

【问题标题】：Flexbox not working on IE10Flexbox 无法在 IE10 上运行
【发布时间】：2016-08-16 09:18:32
【问题描述】：

您好，以下代码在 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

如果文本长度超过 300px，我想要得到的结果是修剪后的文本。

【问题讨论】：

在 IE 11 及更高版本中支持，请查看：caniuse.com/#feat=flexbox
知道如何在 IE 8-10 中获得该行为吗？
根据您的要求，您可以使用 display:block 来实现它，为什么要使用 flex，有什么具体原因？
问题已经回答检查stackoverflow.com/questions/18019450/…
@SanjeevK 没有具体原因。你的意思是用display: block;替换display: flex;？恐怕它也不起作用:(

标签： html css flexbox frontend internet-explorer-10

【解决方案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>

【讨论】：

空白：-webkit-pre-wrap;这段代码在那里..我已经完成了 crome、modizilla、IE9、10、11 和 safari，
您是在尝试包装它还是，，您尝试创建一个新的网络浏览器“-webkit;”这个词本身描述它是用于 chrome
您的解决方案将内容分成另一行，但我想修剪它，因此如果它长于 300 像素，最后会出现 3 个点。

【解决方案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>

【讨论】：

更改最大宽度值并观察它！兄弟
在 "".contentTrimmed"" 类中添加 ""display: inline-block"" 并再次检查