Tachyons
v4.12.0
Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

White Space

White space in css is used to control how whitespace is rendered. Creative, I know.

Normal supresses white space characters and breaks lines based on the width of the element or the placement of a br tag.
Nowrap will keep all text on one line - often used in conjunction with truncation or a scrollbar. This can be useful for displaying unix style commands where indicating everything is on one line is important for clarity.
Pre will preserve all whitespace and linebreaks. This is useful for displaying code or poetry. Simulates the rendering of the pre tag.

Examples

This text is formatted the same way in the source and printed three times, with the only difference being which white-space class is attached.

<p class="ws-normal">Content</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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

.nowrap

Typography is to literature as musical performance is to composition: an essential act of interpretation, full of endless opportunities for insight or obtuseness.

.pre

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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Previous

Text Decoration

Next

Debugging

Reference

MDN - White Space

tachyons-white-space

v4.0.7 153 B
Declarations
12
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1
src/_white-space.css 

/*

   WHITE SPACE

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/


.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }

@media (--breakpoint-not-small) {
  .ws-normal-ns { white-space: normal; }
  .nowrap-ns { white-space: nowrap; }
  .pre-ns { white-space: pre; }
}

@media (--breakpoint-medium) {
  .ws-normal-m { white-space: normal; }
  .nowrap-m { white-space: nowrap; }
  .pre-m { white-space: pre; }
}

@media (--breakpoint-large) {
  .ws-normal-l { white-space: normal; }
  .nowrap-l { white-space: nowrap; }
  .pre-l { white-space: pre; }
}