Question

我几乎没有与CSS中的溢出属性相关的查询 - 请查看以下代码段，

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我的最后一个问题是，如果我用连字符（ - ）或空格分隔文本，为什么它会分成2行而不是在同一行继续？我知道这可能是因为我的外部容器的大小，但为什么不输入没有空格的文本时它会分裂？ 检查以下内容，

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

inner-div类为div提供position: absolute属性。这使得内部div独立于父div的大小，并且将始终保持溢出，直到您明确指定父容器的高度和宽度并停止锚定inner-div（使用right，{{ 1}}，top和left）。通过不锚定内部div，绝对定位元素的目的是有点失败。您可以通过删除bottom取回水平滚动条，但您可能不希望这种情况发生。

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

包装是如何运作的。如果一行的单词不适合宽度，则单词在遇到空格后会移动到下一行。如果您不希望单词在空格后变形，则应使用不间断空格（例如：right）或使用 。

Answer 2

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

对于行分割，这是因为自动换行会破坏单词或连字符末尾的行。

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

2 个答案: