css - 在 IE11 中无法使用分词符将单词分成几行

Question

我有一些带有这个 css 的文本:

word-break: 分词;

它应该做的是在我减小窗口尺寸时将文本分成几行。它响应迅速，在 Chrome 中运行良好，但在 Internet Explorer 11 中无效。我对此进行了很多搜索，但没有解决我的问题。

如果有帮助，这是文本容器的 css 类:

.my-class {
    width: 170px;
    padding-bottom: 100px;
    padding-top: 100px;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    text-align: end;
}

有什么建议吗？

Answer 1

要使 flexbox 在 IE 中工作，您可以将代码更改为:

.my-class {
    width: 170px;
    padding-bottom: 100px;
    padding-top: 100px;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    text-align: end;
    display: -moz-flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    -ms-flex-pack: space-around;
    box-orient: vertical;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    flex-flow: column wrap;
}