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

Question

我正在为一个棘手的 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，宽度很好）。

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

你能帮我理解为什么我的文本没有增加宽度，有什么可能的解决方案来避免这种情况？ 那会很亲切，

非常感谢

Answer 1

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

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

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

问题描述

1 个解决方案

解决方案1
0 2021-06-01 15:04:07

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

问题描述

1 个解决方案

解决方案1 0 2021-06-01 15:04:07

解决方案1
0 2021-06-01 15:04:07