IE11中的左右断字

Question

我想在Internet Explorer 11中得到这种行为
在Chrome和Firefox中，当flexbox居中对齐时，单词会左右缠绕。在IE11中，换行符仅在右侧。检查图片以查看IE11中的区别。 ¿如何在IE11中获得Chrome和Firefox的行为？谢谢！

div {
  width: 150px; 
  border: 1px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

<h1>The word-wrap Property</h1>

<h2>word-wrap: normal (default):</h2>
<div> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

See IE11 Preview

See Chrome and Firefox preview

Answer 1

这是IE中常见的flexbug。

您可能会从以下位置看到IE中部分支持flex：https://caniuse.com/#feat=flexbox

您还可以从https://github.com/philipwalton/flexbugs

找到常见的flexbug和相关的变通办法。

我修改了部分代码，也许您可​​以参考：

CSS。

    .outer {
        width: 150px;
        border: 1px solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .inner {
        box-sizing: border-box; 
        max-width: 100%;
    }

HTML。

<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="outer">
    <div class="inner">
        This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
    </div>
</div>

Answer 2

对于IE11，解决方案是使用flex-direction：列； Code Sample