长词溢出flex容器[重复]答案

【问题标题】：Long words overflow flex container [duplicate]长词溢出flex容器[重复]
【发布时间】：2018-09-11 11:58:09
【问题描述】：

有谁知道如何避免 flex 容器中的长词溢出？

.wrap{
  display:flex;
  overflow-wrap: break-word;
  max-width:100%;
}

<div class="wrap">
  <div class="a">
    a
  </div>
  <div class="b">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  </div>
</div>

我只找到了这个帖子Break long words inside flex item，但它并没有解决问题

谢谢

【问题讨论】：

您希望它是什么样的？溢出：隐藏？
你可以用 word-break 换行：break-all
请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
将min-width:0 添加到b
我既不希望溢出：隐藏也不希望断词：全部中断。当长词“ffff ...”到达其“.wrap”容器的末尾时，我需要换行，该容器的宽度不应超过 100%（最大宽度：100%）。但我不想通过“break-all”来实现这一点，因为这个属性不仅可以裁剪长词，还可以裁剪短词。

标签： css flexbox word-wrap

【解决方案1】：

又好又简单 - 断字：打破一切；

只需添加这个。不多不少:)

word-break: break-all;

在此处查看结果：

.wrap{
  display:flex;
  overflow-wrap: break-word;
  max-width:100%;
  word-break: break-all;
}

<div class="wrap">
  <div class="a">
    a
  </div>
  <div class="b">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  </div>
</div>

【讨论】：

但是break-all会破坏更短的单词...将“ffff”更改为例如“animals animals”（x100）并且行尾看起来像“ani”或“anima”并且以此类推。
是的。没有字长变量。但是，您可以编写一些 JavaScript 来首先计算一个作品有多少个字母，然后如果满足条件，比如 20 个字母，它将插入 word-break: break-all; 样式。
类似这样的东西：stackoverflow.com/questions/20345070/…
好的，谢谢，但我需要在没有 JS 的情况下理想地解决这个问题。我创建了一个新线程来更好地描述我的问题stackoverflow.com/questions/52277368/…

【解决方案2】：

你试过这样做吗？

 .wrap{
      display: flex;
      max-width: 150px;
    }

    .b{
      word-break: break-all;
    }

【讨论】：