Css “为什么？”；“断字”；工作，但是；“自动换行”；不起作用？

我有一个简单的布局使用flexbox

.wrap{
显示器：flex；
证明内容：之间的空间；
宽度：100vw；
}
.wrap.左，
.包装，对吗{
弹性：1；
}
.wrap.左{
背景：蓝色；
}
.包装，对吗{
背景：绿色；
}

你好
世界！

它们非常相似。一个问题是，

wordbreak:break-word

仍然是实验性的，可能会引起问题

但是这里的问题是

display:flex

，因为要使

overflow wrap:break word

起作用，它需要应用于

具有可视化渲染，是具有显式 高度/宽度，绝对定位和/或是块元素

例如，将宽度添加到

右侧

，而不是

左侧

会导致这种差异。两者都有

溢出换行：break word

，但只有一个具有特定宽度

这是我所能想到的

wordbreak

和

overflow wrap

之间的唯一区别，因为两者都有

break word

作为值

.wrap{
显示器：flex；
证明内容：之间的空间；
宽度：100vw；
边框：3倍纯红；
溢出包装：断开单词；
}
.wrap.左，
.包装，对吗{
弹性：1；
}
.wrap.左{
背景：蓝色；
}
.包装，对吗{
背景：绿色；
宽度：50%；
}

aaa WordWordWordWordWordWordWordW bbb！
aaa单词单词bbb

正如您已经注意到的，两者的行为应该是相同的，并且问题在某种程度上与flexbox有关。如果我们使用不带flexbox的布局，两者都会产生相同的结果：

。对{
背景：绿色；
利润率：10px；
}

世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！
世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界！世界这一定是您感兴趣的：@Daut>“溢出包装：断开单词”是为了防止溢出，如果行中没有其他可接受的断开点，通常不可断开的单词可能会在任意点断开。（）因此，如果设置“溢出包装：断开单词”，“世界！世界！世界！”和“世界！世界！世界！”应该向后折叠。我认为问题可能在于flex允许孩子们在内容太大时溢出，因此单词断开不起作用in@Takitlsy>谢谢你的链接！有一些有用的答案，但没有一个提到规格。如果可能的话，我想阅读和理解说明书。@pete>我想是的。但是，由于“分词”和“分词”的结果不同，这两者之间可能有一些不同。非常感谢您提供的有趣信息。当然，有些人说“具有视觉渲染，是具有显式高度/宽度的内联元素，是绝对定位的和/或是块元素。”但是，规范中没有写它（）。这是因为浏览器的实现吗？或者这是在规范中的某个地方写的？我在规范中的任何地方都没有看到它，但我猜单词
wrap
意味着属性必须知道在哪里进行包装（内容框的边框），这就是它在具有特定宽度的元素上工作的原因。很抱歉，我不能提供更多关于这个的信息。非常感谢你提供的有趣的信息。通过使用
最小宽度
，我可以确认
溢出包装
是否有效。这表明flexbox对宽度的控制存在问题。然而，奇怪的是，在具有完全相同角色的
溢出包装
和
分词
之间，只有
溢出包装
受到影响。
overflow wrap
和'word break'应该有问题，但我找不到。你知道吗？@Hayvy me我也错过了这一部分，无法找到这一部分的描述，因此最后可能是一个bug。我认为这一部分中所写的内容是相关的，但出现的术语很难，我还无法阅读@Hayvy是的，深入研究该规范并不容易，这是一个工作草案，因此它可能随时更改注：使用
overflow:hidden
将产生与
min width:0
类似的效果。