弹性容器中的文本不会在 IE11 中换行

Posted 2023-03-05

【中文标题】弹性容器中的文本不会在 IE11 中换行

【英文标题】：Text in a flex container doesn't wrap in IE11

【发布时间】：2019-02-26 15:02:44

【问题描述】：

考虑以下 sn-p：

.parent 
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;

.child 
  border: 1px solid blue;

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

在 Chrome 中，文本按预期换行：

但是，在 IE11 中，文本没有换行：

这是 IE 中的已知错误吗？ （如果是，将不胜感激）

有已知的解决方法吗？

---

This similar question没有明确的答案和官方指针。

【问题讨论】：

IE11 flexbox preventing text wrapping?的可能重复

当我从父元素中删除 align-items: center 时，问题就消失了。这似乎是造成它的原因

【参考方案1】：

将此添加到您的代码中：

.child  width: 100%; 

我们知道块级子级应该占据父级的整个宽度。

Chrome 明白这一点。

IE11，无论出于何种原因，都需要一个明确的请求。

使用flex-basis: 100% 或flex: 1 也可以。

.parent 
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;

.child 
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

注意：有时需要对 html 结构的各个级别进行排序，以确定哪个容器获得了width: 100%。 CSS wrap text not working in IE

【讨论】：

我必须添加宽度：100%；给父母。根据上下文，这个错误似乎有各种修复。叹息 IE！

在 .child 上使用“max-width: 100%”。

我正在使用 flex 创建一个表格（每一行都是一个 flex，它的孩子有：flex: 1 1 50%; display: flex; align-items: center;。毫不奇怪，IE 在单元格中自动换行时会失败。设置@987654329 @ 有效，但设置 min-width: 100% 无效！它应该，但它没有（就像所有 IE 一样），所以我尝试了 max-width: 99%，令人惊讶的是，它确实有效。我认为使用 @ 987654332@可能会更好？

我必须删除父级上的 flex-direction: column 才能正常工作。

这个问题似乎是 flex 列独有的。弹性行不会发生。

【参考方案2】：

我遇到了同样的问题，关键是元素没有根据容器调整其宽度。

不要使用width:100%，保持一致（不要混合浮动模型和弹性模型）并通过添加以下内容来使用弹性：

.child  align-self: stretch; 

或者：

.parent  align-items: stretch; 

这对我有用。

【讨论】：

是的，这个答案也很有意义（并且可能比宽度更正确）。在我的一个设计中，设置 width:100% 是不可能的，而且这个解决方案效果很好。

【参考方案3】：

正如Tyler 在这里的其中一个 cmets 中所建议的那样，使用

max-width: 100%;

关于孩子可能工作（为我工作）。使用align-self: stretch 仅在您不使用align-items: center 时才有效（我这样做了）。 width: 100% 仅在您想要并排显示的 flexbox 中没有多个孩子时才有效。

【讨论】：

max-width 应用于放置 align-items:flex-start 的同一容器时对我有用。

【参考方案4】：

您好，我必须将 100% 的宽度应用于其祖父元素。不是它的子元素。

.grandparent 
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow


.parent 
    display: flex;
    border: 1px solid red;
    align-items: center;


.child 
    border: 1px solid blue;

【讨论】：

我有“宽度：自动；”在祖父母上。切换到 100% 为我解决了这个问题。

【参考方案5】：

不知何故，所有这些解决方案都不适合我。 flex-direction:column 中显然存在 IE 错误。

我只有在删除 flex-direction 后才能正常工作：

flex-wrap: wrap;
align-items: center;
align-content: center;

【参考方案6】：

我发现的最简单的解决方案就是将 max-width: 100% 添加到超出范围的元素。如果您在轮播等设备上使用它，请记住添加一个具有 max-width 属性的类。

【参考方案7】：

.grandparent
   display: table;


.parent
  display: table-cell
  vertical-align: middle

这对我有用。

【参考方案8】：

建议的解决方案对“.child width: 100%;”没有帮助，因为我有更复杂的标记。但是，我找到了一个解决方案 - 删除“align-items：center;”，它也适用于这种情况。

.parent 
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/

.child 
  border: 1px solid blue;

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

【讨论】：

您不需要删除align-items: center。见***.com/a/39365207/630170

【参考方案9】：

我始终能够 100% 避免此 flex-direction 列错误的唯一方法是使用最小宽度媒体查询为桌面尺寸屏幕上的子元素分配最大宽度。

.parent 
    display: flex;
    flex-direction: column;


//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) 
    .child 
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    

您需要将自然内联子元素（例如 <span> 或 <a>）设置为内联以外的其他内容（主要是 display:block 或 display:inline-block），以便修复工作。

【参考方案10】：

我也遇到过这个问题。

唯一的选择是在子元素中定义一个宽度（或最大宽度）。 IE 11 有点傻，我也才花了 20 分钟才实现这个解决方案。

.parent 
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;

.child 
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px) // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  
  @media (max-width:600px)
    max-width: 400px;
  
  @media (max-width:400px)
    max-width: 150px;
  


<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

【参考方案11】：

我在这里没有找到我的解决方案，也许有人会有用：

.child-with-overflowed-text
  word-wrap: break-all;

祝你好运！

【讨论】：

IE中没有这个值，可能是word-wrap: break-word;

【参考方案12】：

我遇到了类似的问题，即 flex 包装器中的图像溢出。

将flex-basis: 100%; 或flex: 1; 添加到固定的溢出子项对我有用。

【参考方案13】：

如果一个简单的解决方案也有效，为什么还要使用一个复杂的解决方案？

.child 
  white-space: normal;