内联块不能与 div 的溢出包装一起使用

Question

我有两个divs 在使用display: inline-block 时非常适合放在一行，但是如果一个容器现在包含一些我尝试用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

Answer 2

你必须给 div 一个宽度。 inline-block 将根据需要占用尽可能多的空间，因此如果它的内容占据了视口的整个宽度，它的作用类似于 display:block。