内联块不能与 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 一个宽度。 inline-block 会根据需要占用 space，所以如果它的内容占据视口的整个宽度，它就像 display:block.

Answer 2

如果您只想将两个 div 放在同一行中，请考虑将它们包装在父级 div 中 display:flex

了解 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

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

inline-block not working together with overflow-wrap for divs

html

css

inline

overflow

word-wrap