CSS 文本环绕折叠容器

Question

我正在寻找 HTML/CSS 解决方案来解决我们在构建网站时遇到的问题。如果需要，我很乐意实施基于 JavaScript 的解决方案，但我更希望它是本地处理的。

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

当文本很短时，由于浮动，容器会折叠到文本的宽度。当文本很长并且出现换行时，容器会以最大宽度挂出，即使里面的文本已经换行在下面，所以右侧有一小部分背景颜色（对于包装词）我希望容器折叠到前一个单词的边缘，这样它就不会 "look like" 当包装的单词非常接近时 space。

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/

如果您查看第 3 个示例，您会看到橙色框右侧有少量填充，其中 porttitor 一词已在下方换行，但橙色容器仍位于最大宽度，尽管浮动。如果内容编辑器引入了换行符（例如，根据示例 4 在 vestibulum 和 porttitor 之间），则容器会正确折叠。

我认为发生的情况是容器在文本换行之前变大，而浏览器在换行后不重新计算宽度？

这是我在 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?

我认为一般 consensus/conclusion 是不可能没有前沿技术 CSS 我应该使用 JavaScript 解决方案。

我在我的 JSFiddle 中添加了更多示例：http://jsfiddle.net/nmuot8bm/6/ 包括来自此处的 JavaScript 解决方案：

Answer 1

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

Answer 2

无法使用 CSS...这就是内联框模型的工作方式 JS example/solution 可以在 JSFiddle

上找到

CSS 文本环绕折叠容器

CSS text wrapping collapse container

html

css

word-wrap