Html 即使在使用自动换行后，flex 项目也会因长字而溢出容器

flex item overflows container due to long word even after using word-wrap

提问by Sachin

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

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

CSS

CSS

.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;

}

The main issue with the above code is ,child3overflows but if I give a max-widthin child2it will not overflow the parent. In both cases I used word-wrap: break-word;

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

You can check the code herehttp://jsfiddle.net/vbj10x4k/

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

I need to know why it happens and how to solve it without using max-width/widthto fixed pixel values.I need it to be responsive.

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

回答by Paul

Instead of setting a max-width for your flex item, use a min-width declaration.

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

By default, if no min-width is set, the item's content min-width is assumed and the flex item's width will never be smaller. By setting a min-width of e.g. 40%, the item will shrink to at most 40% of the flex parent.

默认情况下，如果没有设置 min-width，则假定项目的内容 min-width 并且弹性项目的宽度永远不会更小。通过设置例如 40% 的最小宽度，项目将最多收缩到 flex 父级的 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>

See the code snippet above or the external demo: http://jsfiddle.net/vbj10x4k/5/

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

回答by Gaurav Aggarwal

Instead of word-wrap:break-worduse word-break:break-all

而不是word-wrap:break-word使用word-break:break-all

CSS

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;

}

here is the working fiddle link http://jsfiddle.net/yudi/vbj10x4k/3/

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

回答by Rock Lee

I am using a combination like this and it works for me on Chrome, Safari, and Firefox.

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

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

This site says word-break is supported on Chrome & Safari https://caniuse.com/#feat=word-break.

这个网站说 Chrome 和 Safari 支持断字https://caniuse.com/#feat=word-break。

But I found that Firefox's solution should be overflow-wrap: anywhereon this site: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

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

I'm not sure about IE yet... Maybe word-wrap: break-word;works on IE?

我对 IE 还不太确定……也许word-wrap: break-word;可以在 IE 上使用？

My goal is this:

我的目标是这样的：

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 |
.                  |

回答by RomainZ

Thanks to the Gaurav Aggarwal's answer, I've been able to solve the same kind of issue by using the CSS property:

感谢 Gaurav Aggarwal 的回答，我已经能够通过使用 CSS 属性来解决同样的问题：

word-break: break-word