# White space

> Utilities for controlling an element's white-space property.

Source: https://www.zenplates.co/documentation/utilities/white-space (Utilities › Typography)

| Class                   | Properties               |
| ----------------------- | ------------------------ |
| `.white-space-normal`   | `white-space: normal;`   |
| `.white-space-no-wrap`  | `white-space: nowrap;`   |
| `.white-space-pre`      | `white-space: pre;`      |
| `.white-space-pre-line` | `white-space: pre-line;` |
| `.white-space-pre-wrap` | `white-space: pre-wrap;` |

## Usage

Use `.white-space-normal` to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

```html
<p class="white-space-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et 

      dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>
```

Use `.white-space-no-wrap` to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

```html
<p class="white-space-no-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et 

      dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>
```

Use `.white-space-pre` to preserve newlines and spaces within an element. Text will not be wrapped.

```html
<p class="white-space-pre">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et 

      dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>
```

Use `.white-space-pre-line` to preserve newlines but not spaces within an element. Text will be wrapped normally.

```html
<p class="white-space-pre-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et 

      dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>
```

Use `.white-space-pre-wrap` to preserve newlines and spaces within an element. Text will be wrapped normally.

```html
<p class="white-space-pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et 

      dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit.</p>
```

## Variants

By default, no responsive or hover-state variants are generated for white-space utilities.

### Responsive

To include responsive variants like `.md:white-space-pre`, add `"white-space"` to the `$responsive-variants` variable in your theme's `_variables.scss` file when [recompiling your CSS](https://www.zenplates.co/documentation/customization/using-sass-source-files):

```scss
$responsive-variants: (
  // ...
  "white-space",
);
```

### Hover-state

To include hover-state variants like `.hover:white-space-pre`, add `"white-space"` to the `$hover-variants` variable:

```scss
$hover-variants: (
  // ...
  "white-space",
);
```