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

Question

I'm scratching my head around a tricky CSS problem.我正在为一个棘手的 CSS 问题挠头。 Could you help me to understand what's going on?你能帮我理解发生了什么吗？ My code is very simple:我的代码很简单：

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

Basically, it's just text wrapped inside a 300px scrollable container.基本上，它只是包装在 300 像素可滚动容器内的文本。

My problem is the following: I have remarked that when the content inside the scrollable container is bigger than the container due to an overflowing text, the width of the inner element does not grow properly.我的问题如下：我注意到当可滚动容器内的内容由于溢出文本而大于容器时，内部元素的宽度不会正常增长。

Here are a few screenshots to illustrate this:以下是一些截图来说明这一点：

As you can see, the width of the text inside my scrollable container does not fit its content (I'd like the red background to cover the full text).如您所见，我的可滚动容器内的文本宽度不适合其内容（我希望红色背景覆盖全文）。 That looks weird to me, as this is only happening for overflowing texts, not manually sized divs (if I put a 500px within my 300px container, width is good).这对我来说看起来很奇怪，因为这只会发生在溢出的文本中，而不是手动调整大小的 div（如果我在 300px 的容器中放置一个 500px，宽度很好）。

I've found solutions on the web using width: fit-content, width: intrinsic, … but that does not seem well supported by old browsers.我在 web 上找到了使用 width: fit-content, width: intrinsic 的解决方案……但旧浏览器似乎不太支持。

Could you help me to understand why my text is not growing in width, and what are the possible solutions to avoid that?你能帮我理解为什么我的文本没有增加宽度，有什么可能的解决方案来避免这种情况？ That would be very kind,那会很亲切，

Thanks a lot非常感谢

Answer 1

you can add a inline Element for that, Hope below code helps you您可以为此添加一个内联元素，希望下面的代码可以帮助您

 <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