flex项目由于长word而溢出容器，即使在使用word-wrap之后也是如此。

Question

​

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;

}

<div class="parent">
 <div class="child1">
   question
 </div>
  <div class="child2">
      somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
    
  </div>
</div>

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

​

上面的代码的主要问题是，child3溢出，但是如果我在child2中给出一个max-width，它不会溢出parent。在这两种情况下，我都使用了word-wrap: break-word;

您可以在这里查看代码 http://jsfiddle.net/vbj10x4k/

我需要知道为什么会发生这种情况，以及如何在不使用max-width/width来固定像素值的情况下解决它。，我需要它是响应性的。

Answer 1

不要为您的flex项设置最大宽度，而是使用最小宽度声明.

默认情况下，如果没有设置最小宽度，则假定项目的内容最小宽度，而弹性项的宽度永远不会变小。通过设置一个最小宽度为40%，该项目将收缩到最多40%的弹性父母。

.child2, .child3 {
  min-width: 40%;
}

​

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}
.child3{
  background-color:lightyellow;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child2">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
  <div class="child3">
    Works well with long URLs: <a href="#"> https://thisisadamnlongurlcontainingneitherhyphensoradditionalperiods.com</a>
  </div>
</div>

​

请参阅上面的代码片段或外部演示：http://jsfiddle.net/vbj10x4k/5/

Answer 2

使用word-wrap:break-word代替word-break:break-all

CSS

.child1{
  background-color:mistyrose;
  padding:1em;
  word-break:break-all;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  max-width:500px;
  word-break:break-all;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-break:break-all;

}

下面是工作小提琴链接http://jsfiddle.net/yudi/vbj10x4k/3/

Answer 3

我正在使用这样的组合，它在Chrome、Safari和Firefox上都适用于我。

.myOverflowableText {
  word-break: break-word; /* Chrome, Safari */
  overflow-wrap: anywhere; /* Firefox */
}

这个网站说Chrome & Safari https://caniuse.com/#feat=word-break支持单词突破。

但是我发现火狐的解决方案应该是overflow-wrap: anywhere在这个站点上：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

我还不确定我是不是..。也许word-wrap: break-word;在IE上工作？

我的目标是：

Hello this is some |
text. I am writing |
some text.         |
Especially long    |
words go to the    |
next line like     |
this. This is a    |
veryveryveryveryve |
ryveryverylongword |
.                  |