Html CSS文本包装折叠容器

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

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

当文本较短时，由于浮动，容器收缩到文本的宽度。 当文本很长且出现换行时，容器以最大宽度悬挂，即使内部的文本已在下方换行，因此右侧有一小部分背景色（对于换行的单词来说不够大） 我希望容器折叠到前一个单词的边缘，这样它就不会“看起来”有空间容纳包装好的单词，因为它离得很近

HTML

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

下面是一个JSFIDLE：

如果您看第三个示例，您可以看到橙色框右侧有少量填充物，其中单词porttitor已在下面缠绕到一个新行，但橙色容器仍然位于最大宽度处，尽管存在浮动。 如果内容编辑器引入换行符（例如，如示例4所示，在前庭和porttitor之间），则容器将正确折叠

我认为正在发生的是，在文本换行之前容器会增长，而浏览器在换行之后不会重新计算宽度

下面是JSFIDLE中显示的我的测试用例的图片：

下面是暂存站点上的故障图片（在分离到JSFIDLE之前）：

您可以看到文本已包装，但容器没有折叠，留下了一个很大的背景色间隙

n、 b.我们可以通过执行

文本对齐：justify

来模拟这一点，但是单词之间的间距与网站上的其余文本不一致

编辑：我发现这个问题可能是重复的。我发誓我在发帖子之前做过调查

我认为，普遍的共识/结论是，没有尖端CSS是不可能的，我应该使用JavaScript解决方案

我在JSFIDLE中又添加了几个示例：

---

包括这里的JavaScript解决方案：

如果问题是浮动元素折叠父容器，那么有很多解决方案；其中最简单的方法是将

溢出：隐藏

或

显示：表

添加到父对象（对象正在崩溃）。还要注意，

内联块

和浮动元素本质上是冗余的

CSS不可能……内联框模型就是这样工作的

---

JS示例/解决方案可以在JSFIDLE上找到，如您所述，CSS是不可能的…这就是内联框模型的工作方式。这可能与这个问题相同：我是在反问题之后-当包装迫使容器水平变大时，我想强制容器折叠，但是文本包装在边缘上留下了一个间隙，然后，您需要在容器上放置一个最大宽度：）如果折叠的意思是“一个div从950px高度开始，当容器被大屏幕拉伸时，我希望它变成650px高度”，那么您将编写一个媒体查询。媒体查询看起来像是该元素的最大宽度：@media screen和（最大宽度：1020px）或任何所需的内容。巧合的是，如果您的段落文本落在框外，请确保以下几点：1。如果是浮动的，则父级具有溢出：隐藏或显示：表2。它和父对象具有框大小：边框框3。它是绝对定位的还是相对定位的？将定位添加到父级（通常是相对位置），因为默认情况下它可能是静态的。嗯，我只是查看了您的问题案例，意识到我从未回答过您的实际问题。。。实际上，我在Chrome浏览器上遇到过这个bug，而不是Firefox或Safari。您所说的是浏览器以不同的方式呈现文本中的间距。我通常使用wrap:break-word或word-break:break-word来确保每次换行都是一样的，并且不会换行。谢谢你的帮助，这个问题其实很微妙，但是当文本换行时，因为框的最大宽度，所以换行的单词占用的空间不会缩小。

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;
}