CSS 文本溢出其容器：宽度不适合内容 - 没有宽度的解决方案：适合内容答案

【问题标题】：CSS text overflowing its container: width not fitting content - Solution without width: fit-contentCSS 文本溢出其容器：宽度不适合内容 - 没有宽度的解决方案：适合内容
【发布时间】：2021-06-01 14:43:39
【问题描述】：

我正在为一个棘手的 CSS 问题而摸不着头脑。你能帮我理解发生了什么吗？我的代码很简单：

<html>
<body>
<div style="width: 300px; overflow: auto; padding: 10px; background-color: blue">
    <div style="background-color: red">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
</body>
</html>

基本上，它只是包装在 300 像素可滚动容器中的文本。

我的问题如下：我注意到当可滚动容器内的内容由于文本溢出而大于容器时，内部元素的宽度不会正常增长。

这里有一些截图来说明这一点：

如您所见，可滚动容器内的文本宽度不适合其内容（我希望红色背景覆盖全文）。这对我来说看起来很奇怪，因为这只会发生在溢出的文本中，而不是手动调整大小的 div（如果我在 300px 的容器中放置 500px，宽度很好）。

我在网络上找到了使用 width: fit-content、width:intrinsic 的解决方案……但旧浏览器似乎不太支持。

您能帮我理解为什么我的文本没有变宽吗？有哪些可能的解决方案来避免这种情况？那太好了，

非常感谢

【问题讨论】：

你的意思是，文本应该适合没有滚动的 div 是吗？
我的意思是：包含文本的 div 应该包含它的文本（大于 300px 宽）
chnage 样式溢出：隐藏并检查您的期望吗？或者您希望整个文本都适合 300px div 是吗？
它会裁剪我的内容；我想要带有滚动条的全文，但在红色背景上
啊，您需要突出显示整个文本吗？

标签： html css

【解决方案1】：

您可以为此添加一个内联元素，希望下面的代码对您有所帮助

<div style="width: 300px; overflow: auto; padding: 10px; background-color: blue">
    <div>
    <span style="background-color:red">                   ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
    </span>
    </div>
</div>

【讨论】：

为什么不直接制作内部 div display:inline？
我猜这违反了 div 的目的 :) ，无论如何它也是一个解决方案，让我修改答案。谢谢
太棒了，谢谢。而且，你知道为什么它会像块元素那样表现吗？
块级元素总是用于结构化和分组元素集。
该解决方案的问题是外部 div 没有增长。它仍然比包含的元素小：/