# Responsive pre tags in CSS

> Learn how to make pre tags with long code snippets responsive in CSS by setting white-space to pre-wrap and word-break to break-all so they stop overflowing.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-10-27 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/responsive-pre-tags/

I've had some problems with responsiveness in a few posts, on my blog.

Turns out those posts I had problems on, they all had a snippet of code that went beyond the normal page width without a space.

For example

```sh
cd /some/super/long/super/long/folder
```

or any other very long command.

Code snippets on my blog are all automatically added inside a `code` tag, and inside it into a `pre` tag.

By default the CSS `white-space` property on the `pre` tag is set to `normal`, and to fix this problem we set it to `pre-wrap`:

```css
pre {
  white-space: pre-wrap;
}
```

When some words are too long they can still break the layout. To fix this, also add:

```css
pre {
  word-break: break-all;
}
```