CSS: Ist es richtig, dass Textinhalt eines div in das Padding überläuft?

Question

Ich erwartete, dass die Auffüllung in einem Div Text frei von Text bleiben würde. Aber angesichts des folgenden html/css wird der Inhaltstext in das Padding ausgespuckt;

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

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

Der Text überläuft seine 50px Größe und in die 10px Polsterung. Ist das Absicht? Wenn es so aussieht, ist es ziemlich dumm - Padding füllt nicht, wenn es Zeug drin hat! Oder mache ich nur etwas falsch?

Grüße, CSS-Neuling.

Answer 1

Dies ist das korrekte Verhalten. overflow: hidden wird Inhalte abschneiden, die sich außerhalb der Box befinden. Polsterung ist innerhalb der Box, so wird Inhalt glücklich in diesen Raum bei Bedarf überlaufen.

(source)

Um den Effekt zu erhalten, Sie scheinen zu dem Ziel, ist eine Lösung, um Ihre div.foo in einem anderen div wickeln und den Hintergrund auf, dass man stattdessen gesetzt, wie folgt aus:

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

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

Answer 2

Dies liegt daran, dass Sie die Breite des div auf 50px beschränkt haben, was dazu führt, dass der Text in das Padding übergeht. Entfernen Sie diese Breitenanweisung und das div wird mit der Größe des txt darin erweitert und kontrahiert.

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

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

    border: 1px solid green; 
} 

Hoffnung, die Ihnen hilft.

Answer 3

Die einzige Möglichkeit, wie ich diese Arbeit sehen konnte, ist durch die Breite loswerden: 50px ... anders als das ich rumpelte !?

Answer 4

Um dies zu tun, habe ich zwei Divs erstellt: ein Haupt-und einen Wrapper. Ich habe am Ende eine Höhe für das innere Haupt-Div definiert und Overflow versteckt, und es hat das Problem gelöst. Hier ist der Code:

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> 

Der Wrapper hat die Polsterung und die Grenze (neben anderen Attributen). Das Haupt hat eine Höhe und das Attribut Überlauf - das sind diejenigen, die das Problem lösen. Fühlen Sie sich frei zu testen und Sie werden sehen, dass, egal wie viele Wörter zum Hauptdiv hinzugefügt werden, sie nicht teilweise oder überhaupt nicht gezeigt werden. Cross-Browser auch.

Answer 5

Ein anderer Ansatz besteht darin, ein Umriss-Recht als Pseudo-Padding zu verwenden. Reduzieren Sie zunächst die Breite Ihres Elements um 10 Pixel (um den zusätzlichen Betrag zu berücksichtigen, um den die Kontur erweitert wird). Dann fügen Sie Ihrem Element ein 10px festes rotes Umriss-Recht hinzu. Die Gliederung deckt jeden "versteckten" Text ab.

Wenn rechts neben foo Elemente angezeigt werden, fügen Sie am rechten Rand 10px hinzu (weil der Umriss sie nicht zur Seite schieben würde, wie bei einer normalen Breitenerweiterung).

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

} 

Answer 6

Ich lief in dieser Frage, wie gut und nicht wie die Art und Weise funktioniert. Egal wie groß die Katze wird, die Polsterung wird immer zwischen ihr und der Box sein! Wenn also overflow: hidden verwendet wird, sollte der Inhalt ausgeblendet werden, wenn das Padding erreicht wird.

Hier ist ein Hack, der nicht funktioniert, wenn Sie einen Rahmen möchten, aber vielleicht für einige (mich): Verwenden Sie die Grenzen als Auffüllen.

<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.. */ 
}