Question

HTML

<div class="parent">
    <span class="item">This is the text :D</span>
</div>

SCSS

.parent{
    width: 150px;
}
.item{
    display: flex; /* other display: flex also declared eg. -ms-, -webkit- etc */
    align-items: center;
    &::before{
        content: '';
        display: block;
        margin-right: 1em;
        background: url('../linkToImg') no-repeat;
        background-position: center center;
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }
}

上面的代码会在文本前面添加一个图像，并将文本对齐到图像的中间（垂直）。

Codepen看示例 http://codepen.io/aj372/pen/QKgXLA

在Chrome，Firefox和IE11上，文本将换行并不会溢出父容器。但是在IE10上，文本根本不会包装。我已经浏览了stackoverflow和其他地方，但没有一个解决方案有效。这是提出类似问题的问题之一。 IE10 Flexbox P element non-wrapping。我尝试的另一个解决方案是使用word-wrap和word-break。哪一切都行不通。有没有办法让文本在IE10上换行？

ie10 Flexbox文本换行问题

0 个答案: