0build.dev
Choose a layout

white-space

Report an Issue
Class Description

whitespace-normal

Collapses whitespace and allows text to wrap normally.

CSS Rules 

.whitespace-normal {
  white-space: normal;
}

Usage 

<element class="whitespace-normal" />

Responsive

Prefix .whitespace-normal utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:whitespace-normal" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="whitespace-normal:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="whitespace-normal:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before whitespace-normal::before" />

<element class="content-after whitespace-normal::after" />
 .whitespace-normal Collapses whitespace and allows text to wrap normally.

whitespace-nowrap

Sets white-space: nowrap. Prevents line breaks.

CSS Rules 

.whitespace-nowrap {
  white-space: nowrap;
}

Usage 

<element class="whitespace-nowrap" />

Responsive

Prefix .whitespace-nowrap utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:whitespace-nowrap" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="whitespace-nowrap:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="whitespace-nowrap:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before whitespace-nowrap::before" />

<element class="content-after whitespace-nowrap::after" />
 .whitespace-nowrap Sets white-space: nowrap. Prevents line breaks.

whitespace-pre

Sets white-space: pre. Preserves whitespace and line breaks.

CSS Rules 

.whitespace-pre {
  white-space: pre;
}

Usage 

<element class="whitespace-pre" />

Responsive

Prefix .whitespace-pre utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:whitespace-pre" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="whitespace-pre:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="whitespace-pre:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before whitespace-pre::before" />

<element class="content-after whitespace-pre::after" />
 .whitespace-pre Sets white-space: pre. Preserves whitespace and line breaks.

whitespace-pre-line

Collapses whitespace but preserves line breaks.

CSS Rules 

.whitespace-pre-line {
  white-space: pre-line;
}

Usage 

<element class="whitespace-pre-line" />

Responsive

Prefix .whitespace-pre-line utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:whitespace-pre-line" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="whitespace-pre-line:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="whitespace-pre-line:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before whitespace-pre-line::before" />

<element class="content-after whitespace-pre-line::after" />
 .whitespace-pre-line Collapses whitespace but preserves line breaks.

whitespace-pre-wrap

Sets white-space: pre-wrap. Preserves whitespace and wraps when needed.

CSS Rules 

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

Usage 

<element class="whitespace-pre-wrap" />

Responsive

Prefix .whitespace-pre-wrap utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:whitespace-pre-wrap" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="whitespace-pre-wrap:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="whitespace-pre-wrap:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before whitespace-pre-wrap::before" />

<element class="content-after whitespace-pre-wrap::after" />
 .whitespace-pre-wrap Sets white-space: pre-wrap. Preserves whitespace and wraps when needed.

whitespace-break-spaces

Preserves whitespace sequences and allows wrapping at spaces.

CSS Rules 

.whitespace-break-spaces {
  white-space: break-spaces;
}

Usage 

<element class="whitespace-break-spaces" />

Responsive

Prefix .whitespace-break-spaces utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:whitespace-break-spaces" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="whitespace-break-spaces:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="whitespace-break-spaces:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before whitespace-break-spaces::before" />

<element class="content-after whitespace-break-spaces::after" />
 .whitespace-break-spaces Preserves whitespace sequences and allows wrapping at spaces.