---
title: Make < pre > text wrap with CSS
description: Make < pre > text wrap with CSS
---

[B2B Marketing Insights by Ironpaper ](https://www.ironpaper.com/webintel)

# [Make < pre > text wrap with CSS](https://www.ironpaper.com/webintel/articles/make-text-wrap-with-css)

 Written by [Ironpaper](https://www.ironpaper.com/webintel/author/admin) | December 30, 2013

The <pre> tag text does not wrap by default. This can frustrate web designers trying to employ the pre tag as they witness it's bad behavior within a site layout.

There are two solutions for working with <pre> text. One idea is to make the "pre" text wrap, as we do in this blog. Another idea is to give the "pre" text an overflow property to hide the excess content or make it scrollable.

Here is how to tackle wrapping the <pre> text:

pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }

[View full post](https://www.ironpaper.com/webintel/articles/make-text-wrap-with-css)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Ironpaper"
  },
  "dateModified" : "2021-07-13T21:43:52.881Z",
  "datePublished" : "2012-12-30T05:00:00Z",
  "headline" : "Make < pre > text wrap with CSS",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.ironpaper.com/webintel/articles/make-text-wrap-with-css",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://www.ironpaper.com/hs-fs/hub/281355/file-241997171.png",
      "width" : 169.12752
    },
    "name" : "B2B Marketing Insights"
  }
}
```