Question

当屏幕尺寸缩小时，我一直试图让<div class="status_">容器中的文字换行。

适用于Chrome，FF，Safari和Edge，但不适用于IE 10和11。

我已查看过有关此主题的其他StackOverflow帖子，例如IE11 flexbox preventing text wrapping?，但它没有帮助解决我的问题。

在使用flexbox时，有没有让我的文本包装在IE中？

＆＃13;

/* tr */
.row_content_style {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

/* td */
.row_content_style .lst_td {
    vertical-align: middle;
    padding: 10px;
}

/* div inside td */
[class*=status_] {
    max-width: 1000px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

＆＃13;

<table width="100%" class="list_maincol" style="border-collapse: collapse;">
  <tbody>
    <tr class="row_content_style">
      <td class="lst_td">
        <div class="status_">
          text that should wrap. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper.            </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

以下是包含我的代码的代码：http://codepen.io/maureenv/pen/VmNBwg

谢谢

Answer 1

Michael_B就在上方。你也可以试试这个：

-ms-flex-flow: wrap;
-webkit-flex-flow: wrap;
flex-flow: wrap;

Answer 2

这帮助了我IE 10

-ms-flex-direction: column

Flexbox防止IE 10中的文字包裹11

2 个答案: