在行中断后，具有最大宽度的“内联块”div比必要的宽

Question

考虑这个jsFiddle：http://jsfiddle.net/SnhDX/2/

正如您所看到的，红色inline-block-1 div占用的空间超出了文本所需的空间。 有没有办法删除空白部分，所以它看起来像绿色inline-block-2（没有删除max-width而没有硬编码width）？ jQuery is允许，但首选CSS / HTML解决方案。

图片供参考。红色的是错的，绿色的是对的：

Answer 1

这有点棘手。

我能够让两个div匹配的最接近的是在“Ipsum”之后的<br>中插入inline-1。罪魁祸首是“Ipsum”和“This”之间的空白。当文本以指定的100px包装时，它会保留适合的所有内容 - 包括这两个单词之间的空格。唯一可以胜过硬空白的是设置一个明确的宽度来使其包裹或摆脱它。插入<br>而不是空格会消除这个空格，尽管在我的浏览器中它们仍然只有几个px。

我不想成为那个人，但这似乎不必要地复杂 - 需要这个设置是什么？除非您正在使用float，否则您无法更改显式宽度，这是非常不正常的。也许有办法简化这个并让自己的生活更轻松？

Answer 2

我在垂直尺寸方面遇到了这个问题。看看添加这个CSS是否有帮助：

overflow:hidden

祝你好运！ -Brendan

Answer 3

如果你必须保留max-width: 100px，那么只需设置宽度等于“正确”容器的宽度，那么它们的大小都相同。

jsFiddle