css覆盖右侧被切断答案

【问题标题】：css overlay right side is cut offcss覆盖右侧被切断
【发布时间】：2016-05-30 19:54:10
【问题描述】：

我正在插入一个宽度为 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;
}

【问题讨论】：

标签： css overlay padding

【解决方案1】：

填充不以 HTML 的宽度计算。

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

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

但是，在您的情况下，您的字符串是一堆“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;

【讨论】：

【解决方案2】：

用下面的代码替换你的 CSS 填充，

.overlay {
padding : 20px 0px;
}

【讨论】：

【解决方案3】：

当您使用padding: 20px 时，您需要将width 和height 减少40 像素，您可以使用calc(100% - 40px) 来做到这一点。

另外你需要添加word-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;
}

【讨论】：