CSS 中的溢出属性实际上是如何工作的？

Question

我在 CSS- 中很少有与溢出属性相关的查询 检查下面的代码片段，

.outer-div {
    display: flex;
    position: relative;
    height: 3.5em;
    width: 20%;
    border: 2px solid #000000a3;
    margin-left: 300px;
    align-items: center;
    border: 1px solid green;
}
.inner-div {
 border: 1px solid blue;
    position: absolute;
    right: 1%;
    font-size: 40px;
}

<html>
<head>
</head>
<body>
  <div class = "outer-div">
    <div class = "inner-div">HelloWorld</div>
  </div>
</body>

在上面的代码片段中，inner-div 容器在 x 方向溢出，而不是在 y 方向溢出。但是如果我添加 overflow: scroll，那么它会在两个方向上添加一个滚动条（直到这里很好），但是 我可以使用 y 方向的滚动条而不是 x 方向的滚动条，尽管inner-div 容器在 x 方向溢出的事实。为什么会这样？ 检查此代码段，

.outer-div {
    display: flex;
    position: relative;
    height: 3.5em;
    width: 20%;
    border: 2px solid #000000a3;
    margin-left: 300px;
    align-items: center;
    border: 1px solid green;
    overflow: scroll;
}
.inner-div {
 border: 1px solid blue;
    position: absolute;
    right: 1%;
    font-size: 40px;
}

<html>
<head>
</head>
<body>
  <div class = "outer-div">
    <div class = "inner-div">HelloWorld</div>
  </div>
</body>
</html>

我的最后一个问题是，如果我用连字符 (-) 或 space 分隔文本，为什么它分成两行而不是在同一行中继续？ 我知道这可能是因为我的外部容器的大小，但 为什么当我输入没有 spaces 的文本时它不分裂？ 检查下面，

.outer-div {
    display: flex;
    position: relative;
    height: 3.5em;
    width: 20%;
    border: 2px solid #000000a3;
    margin-left: 300px;
    align-items: center;
    border: 1px solid green;
}
.inner-div {
 border: 1px solid blue;
    position: absolute;
    right: 1%;
    font-size: 40px;
}

<html>
<head>
</head>
<body>
  <div class = "outer-div">
    <div class = "inner-div">Hello World</div>
  </div>
</body>
</html>

非常感谢您的宝贵时间和帮助！

Answer 1

div没有水平滚动条，因为它是绝对定位的。将您的 .inner-div 的位置属性设置为 absolute 或 fixed 以外的其他内容，您的 div 将具有所需的滚动功能。

至于分行，那是因为自动换行，在单词或连字符的末尾换行。

Answer 2

inner-div class 将 position: absolute 属性赋予 div。这使得内部 div 独立于父 div 的大小，并且将始终溢出，直到您明确指定父容器的高度和宽度并停止锚定内部 div （使用 right、top、left 和 bottom）。通过不锚定 inner-div，绝对定位元素的目的有点被打败了。您可以通过删除 right 恢复水平滚动条，但您可能不希望这种情况发生。

简而言之，绝对定位的元素不是流的一部分，而是存在于另一个维度中（它们对父元素不可见 div）。

这就是自动换行的工作原理。如果一行字放不下宽度，遇到白-space后，将字移到下一行。如果您不希望单词在 space 之后扭曲，您应该使用不间断的 spaces（例如： ）或使用 white-space: nowrap;.

CSS 中的溢出属性实际上是如何工作的？

How overflow property in CSS actually works?

css

overflow

CSS 中的溢出 属性 实际上是如何工作的？

How overflow property in CSS actually works?

css

overflow

CSS 中的溢出属性实际上是如何工作的？