CSS文本包装折叠容器

Question

我正在寻找一个HTML / CSS解决方案来解决我们在我们正在构建的网站上遇到的问题。 如果需要，我很乐意实现基于JavaScript的解决方案，但我更喜欢它本地处理。

我们有内容管理的文本，它需要位于指定区域内，但如果超出可用宽度则换行。 文本后面是不透明度的背景颜色。

当文本很短时，由于浮动，容器会折叠到文本的宽度。 当文本很长，并且发生了换行时，容器会以最大宽度挂出，即使里面的文字已经包裹在下面，所以右侧有一小部分背景颜色（不是＆＃39;足够大的包装词） 我希望容器能够折叠到前一个单词的边缘，所以它不会像＃34;看起来像＆＃34;当它非常接近时，它就有被包裹的词的空间。

HTML

<div>
    <p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>

CSS

body div {
    background-color: #AAFF3B;
    max-width:80%;
    padding:20px;
    display:inline-block;
    float:left;
}
body p {
    display:inline-block;
    background-color: #FFAA3B;
    position: relative;   
    float:left;
    white-space:pre-line;
    clear:left;
}

这是一个JSFiddle：http://jsfiddle.net/nmuot8bm/3/

如果你看一下第三个例子，你可以在橙色框的右侧看到少量的填充，其中字porttitor已经在下面包裹到一个新行但是橙色容器仍然处于最大宽度，尽管浮动。 如果内容编辑引入了换行符（例如，根据示例4在前庭和移植器之间），则容器正确折叠。

我认为发生的事情是容器在文本换行之前增长，浏览器在包装后没有重新计算宽度？

这是我在JSFiddle中显示的测试用例的图片：

以下是分段站点上的故障图片（在分离到JSFiddle之前）：

您可以看到文本已经包装，但容器没有折叠，留下了很大的背景颜色。

n.b。我们可以通过执行text-align:justify来模拟这一点，但这些单词之间的间距与网站上其他文本不一致。

编辑：我看到这个问题可能是重复的。我发誓在发布之前我做过研究！

max-width adjusts to fit text?

CSS Width / Max-Width on Line Wrap?

Wrapping text forces containing element to max-width

Shrink DIV to text that's wrapped to its max-width?

我认为普遍的共识/结论是没有前沿的CSS我不可能使用JavaScript解决方案。

我在JSFiddle中添加了一些示例：http://jsfiddle.net/nmuot8bm/6/ 包括此处的JavaScript解决方案：https://stackoverflow.com/a/33246364/647728

Answer 1

CSS不可能......这就是内联盒模型的工作方式 可以在JSFiddle

上找到JS示例/解决方案

Answer 2

如果问题是浮动元素折叠父容器，则有许多解决方案;其中最简单的是将overflow: hidden或display: table添加到父级（崩溃的东西）。还要注意inline-block和浮动元素本质上是多余的。