Warum "inline-block" - Elemente in ein "nowrap" div overflow?

Folgende code bewirkt, dass #Schlagzeile zum überlauf #wrapper, und ich verstehe nicht, warum dies geschieht.

HTML:

<div id="wrapper">
    <div id="logo">
        <img src="/test.png">
    </div>
    <div id="headline">
        <h1>This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #</h1>
    </div>
</div>

CSS:

#wrapper {
    background: #fea;
    white-space: nowrap;
    width: 50%;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
}

Beispiel-code: http://jsfiddle.net/XjstZ/21/ oder http://tinkerbin.com/XvSAEfrK

InformationsquelleAutor Markus | 2012-07-03

5

Wie der name schon sagt, inline-blocks Teilnahme an inline-layout, das heißt, Sie Verhalten sich genauso wie inline-Elemente und text. white-space: nowrap bewirkt text-überlauf in ein element, indem Sie verhindern, dass es von der Verpackung; das gleiche passiert mit inline-blocks. So einfach ist das.

Die Tatsache, dass #headline hat white-space: normal hat keine Auswirkungen auf seine eigenes layout. Ein element ist white-space Eigenschaft wirkt sich auf das layout der Inhalte, nicht, selbst wenn das element der eigenen box ist inline-Ebene.

InformationsquelleAutor BoltClock
0

Müssen Sie mit "overflow:hidden" in Ihrer wrapper-element
```
#wrapper {
background: #fea;
white-space: nowrap;
width: 50%;
overflow: hidden;
```
}

Ich aktualisiert Ihre Probe in jsfiddle http://jsfiddle.net/XjstZ/72/

Nicht ganz, wie der Inhalt im <div id="headline"> abgeschnitten wird, pro diese Geige Gabel von dir: jsfiddle.net/vkaggbx8

InformationsquelleAutor Santiago Porras

Einstellung Breite headline-element wird das Problem behoben.

#headline {
   display: inline-block;
   vertical-align: middle;
   width: 60%;
}

Es ist responsive, wenn sowohl Bild-als wrapper und Bild haben Ihre max-width definiert.

#logo {
   display: inline-block;
   vertical-align: middle;
   max-width: 35%;
}

#logo img {
   width: 6em;
   max-width: 100%;
}

http://jsfiddle.net/tt1k2xmL/

InformationsquelleAutor HeWi

-1

Diese Inhalte wickeln, weil white-space: normal;.

Den white-space CSS-Eigenschaft legt fest, wie whitespace-Zeichen in einem element behandelt wird. , Wörter zu bilden, brechen in sich selbst, verwenden Sie overflow-wrap, word-break oder Bindestriche statt.
Nun, wenn Sie wollen, zu begrenzen, diese mit #wrapper als begrenzen Sie die overflow-Eigenschaft für die div.Wenn Sie mit white-space: nowrap; für die div dies klar, der überlauf text und zeigen Sie das div in einer Zeile (ROW).
```
#wrapper {
    background: #fea;
    width: 50%;
    overflow: hidden;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;


}
```
Dies ergibt ein anderes Ergebnis. Die überschrift geschoben wird, ist unter dem Bild.
Aber Sie können überprüfen, meine Geige, die mir der Präfekt Ergebnis.

InformationsquelleAutor A.D.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.