CSS: il valore inline-block e la proprietà white-space

Con gli elementi inline il valore CSS nowrap della proprietà white-space fa in modo che gli elementi continuino a disporsi sulla riga corrente nonostante i limiti delle dimensioni del loro contenitore. Per gli elementi inline-block, non a sorpresa, vale la stessa cosa. Ecco un test che lo dimostra.

Partiamo da un contenitore che contiene molti elementi:

<div id="nav">
	<span>One</span>
	<span>Two</span>
	<span>Three</span>
	<span>Four</span>
	<span>Five</span>
	<span>One</span>
	<span>Two</span>
	<span>Three</span>
	<span>Four</span>
	<span>Five</span>
	<span>One</span>
	<span>Two</span>
	<span>Three</span>
	<span>Four</span>
	<span>Five</span>
	<span>One</span>
	<span>Two</span>
	<span>Three</span>
	<span>Four</span>
	<span>Five</span>
</div>​

La proprietà white-space va sempre applicata al contenitore degli elementi. Usiamo anche una larghezza fissa per il contenitore:

#nav {
    height: 2em;
    white-space: nowrap;
    width: 200px;
}

#nav span {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    word-spacing: 0px;
    padding: 3px 5px;
    background: silver;
}​

Potete visionare il test di seguito.

Test

Il valore inline-block e la proprietà white-space