html - 内联 block 不能与 div 的溢出包装一起使用

Question

当使用 display: inline-block 时，我有两个 div 可以很好地放在一行中，但是如果一个容器现在包含一些很长的单词，我会尝试换行使用 overflow-wrap 和 word-break，这个容器将移动到下一行，这是我想避免的。

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

<div>foo</div>
<div class="bar">
  barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
</div>

View on JSFiddle

我想要的是这个

foobarbarbarbarbarbarbarbarbarbarbarbarbarbar...
...barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar

Answer 1

如果您只想将两个 div 放在同一行中，请考虑使用 display:flex

将它们包装在父 div 中

了解 flexbox model here

在这里查看:

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

div.flex-parent {
  display: flex;
}

<div class="flex-parent">
  <div>foo</div>
  <div class="bar">
    barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
  </div>
</div>

JSFiddle