css overlay 右侧被截断

Question

我正在插入一个宽度为 100% 的叠加 div，但叠加 div 未完全呈现。由于某种原因，它看起来好像向右移动了。

这里是 fiddle .您可以检查右侧的填充是否显示不完整。

html

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

CSS

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
  padding: 20px;
}

Answer 1

在 HTML 中，填充不是按宽度计算的。

这就是为什么当您将宽度设置为 100%(相对于窗口)时，内边距会超出窗口。

如果你想用padding来适应尺寸，你不应该设置任何宽度属性。

但是，在您的情况下，您的字符串是一串“A”，这将影响上面列出的属性。在这种情况下，您需要将宽度设置为比窗口宽度短 40 像素。 (因为左右padding分别是20px，20 + 20 = 40)

document.getElementsByTagName("div")[0].style.width = window.innerWidth - 40 + "px"; 

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

word-wrap: break-word;

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

overflow: hidden;
white-space: nowrap;