CSSのオーバーレイの右側が切り取られています

Question

オーバーレイのdivを幅100％で挿入していますが、オーバーレイの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％（ウィンドウに対して）に設定すると、埋め込みがウィンドウの外側に移動するためです。

パディングを使用してサイズを合わせる場合は、widthプロパティを設定しないでください。

しかし、あなたの場合、文字列は "A"の束であり、上記のプロパティに影響します。この場合、幅をウィンドウの幅より40px短く設定する必要があります。あなたは「A」sがこのCSSプロパティを使用して、次の行に移動したい場合は、それとは別に

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

（ので、左右のパディングは、それぞれ20 + 20 = 40 20ピクセルです）：あなたは40であなたがwidthを削減する必要があるpadding: 20pxとheightを使用していると

overflow: hidden; 
white-space: nowrap; 

Answer 2

：

word-wrap: break-word; 

そうでない場合は、次の二つのCSSプロパティのいずれかを使用pxは、calc(100% - 40px)を使って行うことができます。

さらに、divの長い単語を区切るには、word-wrap: break-wordを追加する必要があります。

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

Answer 3

次のコードを使用してCSSのパディングを交換し、

.overlay { 
padding : 20px 0px; 
}