IE11 中的左右分词

Question

我想在 Internet Explorer 11 中获得此行为
在 Chrome 和 Firefox 中，当 flexbox 居中对齐时，单词会左右换行。在 IE11 中，换行文本仅在右侧。检查图片以查看 IE11 中的差异。 ¿ 如何获得 Chrome 和 Firefox 在 IE11 中的行为？ 谢谢！！

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

您还可以从以下位置找到常见的 flexbug 和相关解决方法：https://github.com/philipwalton/flexbugs

我修改了你的部分代码，或许你可以参考：

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，解决方案是 use flex-direction: column; Code Sample

IE11 中的左右分词

Left and Right Word-Break in IE11

css

word-wrap

flexbox

internet-explorer-11