即使在使用自动换行之后，由于长词，flex 项目也会溢出容器

Posted 2023-03-05

【中文标题】即使在使用自动换行之后，由于长词，flex 项目也会溢出容器

【英文标题】：flex item overflows container due to long word even after using word-wrap

【发布时间】：2016-07-09 02:35:44

【问题描述】：

.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 固定像素值的情况下解决它。我需要它具有响应性。

【参考方案1】：

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

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

见上面的代码sn-p或者外部demo：http://jsfiddle.net/vbj10x4k/5/

【讨论】：

您也可以将其设置为非常小的值，例如 min-width: 1%; 在带有 word-wrap: break-word; 的元素上，它可以工作。

谢谢，我一直在寻找解决方案。但我不明白为什么min-width 会阻止收件箱项目超过容器大小...

请注意：word-wrap 属性在现代浏览器中已被 overflow-wrap 取代。 （我已经更新了使用这两个属性的答案。）见caniuse.com/#search=overflow-wrap

是的，它当然有效（就像 adriaan 的 1%）。非常小的值的问题是，在某些情况下，flex 子项实际上会变得那么小并且根本不可读。通过设置合理的最小宽度，可以避免这种情况。

【参考方案2】：

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

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/

【讨论】：

这个解决方案甚至会破坏 child1 元素中的“问题”一词，这可能不是有意的。而且您仍在使用固定的最大宽度，这不适合响应式设计。

我没有说它不起作用，它只是太多了。只需看一下演示和.child1 元素。 “问题”一词被分成每个字符的行。我只是假设这不是故意的。此外，.child2 仍然设置了最大宽度，这将破坏您在屏幕尺寸低于该值的设备中的布局。

因为在单词之间有空格的情况下自动换行起作用，你应该使用分词

在我见过的所有解决方案中，例如设置min-width: 0，这是唯一对我有用的解决方案。谢谢

分词：断词；是大多数人真正想要的。只有当它们太长时才会破坏单词。否则无论如何都会破坏它们。

【参考方案3】：

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

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

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

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

我还不确定 IE...也许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 |
.                  |

【参考方案4】：

通过tailwind添加min-w-0为我解决了这个问题。

【讨论】：

虽然这有帮助，但这个答案是特定于平台的。由于这个问题既没有引用也没有用 Tailwind 标记，所以 OP 很可能不会使用它。 min-w-0 is just an abstraction for the CSS min-width: 0px;.

任何看到我的回答并使用 Tailwind 的人都可以利用这些信息。当我在寻找解决方案时，这出现在 Google 的 flex box break word 搜索结果中。这也发生在其他线程中，例如我正在查找纬度/经度的 mysql 列类型，并且有人发布了 Laravel 迁移，这对我有帮助，因为我一直在使用 Laravel。仅仅因为这个问题是特定于平台的，并不意味着它不会帮助那些可能没有使用它所适用的特定平台的人。

【参考方案5】：

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

word-break: break-word