css覆盖右侧被切断

我正在插入宽度为100%的叠加div，但叠加div未完全渲染。出于某种原因，它看起来好像已经向右移动了

这是。您可以检查右侧的填充是否未完全显示

html

<div class='overlay'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

---

填充不按HTML中的宽度计算

这就是为什么当您将宽度设置为100%（相对于窗口）时，填充将超出窗口

如果希望使用填充来适应大小，则不应设置任何宽度属性

但是，在您的例子中，字符串是一堆“a”，这将影响上面列出的属性。在这种情况下，需要将宽度设置为比窗口宽度短40px。（因为左侧和右侧的填充分别为20px，20+20=40）

除此之外，如果希望“A”移动到下一行，请使用此css属性：

word-wrap: break-word;

否则，请使用以下两个css属性之一：

overflow: hidden;
white-space: nowrap;

---

当您使用

padding:20px

时，需要将

宽度

和

高度

减少40px，您可以使用

calc（100%-40px）

来实现这一点

您还需要添加

wrap:break-word

以在div中打断长单词

.overlay {
    position: fixed;
    left: 0;
    top: 0;

    width: calc(100%-40px);
    height: calc(100%-40px);

    z-index: 1000000;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;

    padding: 20px;
    word-wrap: break-word;
}

---

用下面的代码替换CSS填充

.overlay {
padding : 20px 0px;
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;

    width: calc(100%-40px);
    height: calc(100%-40px);

    z-index: 1000000;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;

    padding: 20px;
    word-wrap: break-word;
}

.overlay {
padding : 20px 0px;
}