logo

Air CSS ver. 2.3.2

White space

Sometime it is necessary to set a different strategy to handle white spaces and new lines from the default one web browser use in an element.

Mnemonics

Bases
Modifiers
Optional extensions
pre
nowrap
truncate

none
-m = medium width container
-l = large width container

Examples

The borders of each container elements are visible to show the effects of the different white-space attributes in the following examples.

<p class="pre">Lorem ipsum ...</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren! 

<p class="nowrap">Lorem ipsum ...</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod sed diam voluptua. 

<p class="truncate">Lorem ipsum ...</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren!

Source code

/* generate: container-rule */
.pre { white-space: pre; }
.nowrap { white-space: nowrap; }
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* end generate */