web-dev-qa-db-ja.com

CSS：divのテキストコンテンツがパディングにオーバーフローすることは正しいですか？

Div内のパディングがテキストから離れていることを期待していました。しかし、次のhtml/cssを指定すると、コンテンツテキストはパディングに流れ出ます。

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 50px;
  border: 1px solid green;
}

テキストは50pxサイズでオーバーフローし、10pxパディングに入ります。それは仕様ですか？もしそうなら、それはかなりばかげているように見えます-それが中にあるなら、パディングはパディングではありません！それとも私は何か間違ったことをしていますか？

よろしく、CSSの初心者。

cssoverflowpaddinghidden
36
Nigel Alderton

これは正しい動作です。 overflow: hiddenは、boxの外側にあるコンテンツをクリップします。パディングはボックス内であるので、必要に応じてコンテンツがそのスペースにオーバーフローします。

CSS Box model
（ソース）

あなたが狙っているように見える効果を得るには、次のように、div.fooを別のdivでラップし、代わりにそのdivの背景を設定します。

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}
150
Brant Bobby

これは、divの幅を50pxに制限して、テキストがパディングにこぼれるためです。その幅のステートメントを削除すると、divはその中のtxtのサイズで拡大および縮小します。

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;

  border: 1px solid green;
}

お役に立てば幸いです。

4
wilsonpage

これを行うために、2つのdivを作成しました。1つはメインdiv、もう1つはラッパーです。内側のメインdivの高さを定義し、オーバーフローを非表示にして、問題を解決しました。これがコードです：

div.wrap {
  padding: 10px 10px 14px 10px;
  border:1px solid #000000;
  width: 200px;
  height: 70px; 
 }
div.main { 
  line-height: 1.3em;
  overflow:hidden; 
  width: 200px;
  height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */
 }

  <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>

ラッパーには、（他の属性の中でも）パディングとボーダーがあります。メインには高さとオーバーフロー属性があります-これらは問題を解決するものです。テストしてみてください。メインのdivに単語がいくつ追加されても、それらの単語は部分的またはまったく表示されません。クロスブラウザも。

4
seon

私がこれが機能しているのを見ることができる唯一の方法は、幅を取り除くことです：50px ...私が困惑したもの以外！？

3
benhowdle89

別のアプローチは、アウトラインパディングを疑似パディングとして使用することです。まず、要素の幅を10px減らします（アウトラインが伸びる余分な量を考慮するため）。次に、要素に10pxの赤い実線のアウトラインを追加します。アウトラインは「隠された」テキストをカバーします。

Fooの右側に表示される要素がある場合は、必ずその右マージンに10pxを追加してください（アウトラインが通常の幅拡張のようにそれらを脇にプッシュしないため）。

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 40px;
  border: 1px solid green;
  outline-right: 10px solid red;
  margin-right: 10px;

}
1
user1050268

私もこの問題に遭遇しただけで、その動作が気に入らない。猫がどんなに大きくても、パディングは常に猫とボックスの間にあります！したがって、overflow：hiddenを使用する場合、コンテンツはパディングに達したときに非表示にする必要があります。

ボーダーが必要な場合に機能しないハックがありますが、一部の（私）にとってはそうです。ボーダーをパディングとして使用します。

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 0; /* Removed the padding. */
  width: 50px;
  border-right: 10px solid red; /* 10px, background color or transparent. */
  box-sizing: border-box; /* I prefer this one too.. */
}
1
LGT

overflow: hiddenはボーダーをクリップとして使用するため、コンテンツはパディングに流れ込むように設計されています。

ここでは、背景と同じ色のボックスシャドウを使用して、テキストが流れ込まない偽のパディングを生成できます。

box-shadow: 0px 0px 0px 5px black;

これを考慮してマージンとパディングを調整する必要がありますが、これは私がこれまでに見つけた最も痛みのないソリューションです。

0
mcphylus12