55

This image show what i happens in my code This is my blog page. Sometimes I have to use C#,PHP and other code snippets in the blog. Therefore I use pre tags to make it looks nice and keep the formatting code as it is. pre tag width is 100% and it has a background colour. However, the text went away from it as in the above image and horizontal scroll bar going to appear. How can I overcome this? I don't want the bottom scroll bar.

2
  • 1
    Can you link to your actual blog page?
    – Blender
    Dec 3, 2012 at 3:03
  • 14
    Try this CSS: pre{white-space:pre-wrap}. Or better, use <code> tag and use code{white-space:pre-wrap} CSS. But note that pre-wrap is only available in IE>=8.
    – Passerby
    Dec 3, 2012 at 3:20

6 Answers 6

94

There are a few solutions:

The simplest is to place line breaks in the text. This probably is not what you want though, since it will either leave large right margins or still cause scroll bars, unless the browser window is just the right size.

Another is to use white-space:pre-wrap; in the CSS for your <pre> tag. This will cause the text to wrap to a new line as necessary, but still preserve all whitespace present in the source. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for more information about this CSS property.

Alternatively, if you do not want any line breaks added (either manually or through automatic word wrap), you can use one of the following CSS properties for your <pre> tag:

  • overflow-x:hidden; This will simply cut off the text that extends past the right edge. It will not be visible at all.
  • overflow-x:scroll; This will cause scroll bars to appear within your webpage in case text extends past the right edge. This will prevent the entire page from getting so wide that scroll bars appear at the bottom. See http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll for an example.
  • overflow-x:auto; Like overflow-x:scroll; except the scrollbars only appear if required. (Thanks ccalvert in the comments)
5
  • But this is some time get confused,still i did't find real solution
    – Elshan
    Dec 26, 2013 at 5:03
  • 6
    I'm not sure I understand what you are looking for if pre {white-space:pre-wrap;} in the CSS didn't do it. (<pre style="white-space:pre-wrap;"> in your actual HTML should do the same, but is slightly worse practice.) Can you describe what exactly you would like it to do? Dec 27, 2013 at 16:07
  • word-break: break-word; with <xmp> Tag
    – Elshan
    Mar 9, 2014 at 20:11
  • scroll on the pre tag worked nicely - a scroll bar for the code snippet. Jan 10, 2018 at 12:40
  • 1
    In some cases, you might want to experiment with overflow-x: auto.
    – ccalvert
    Mar 5, 2019 at 23:02
11

add style

pre{ 
   white-space: pre-wrap; 
   word-break: break-word;
}
4

My lines are contained in <a> tags. This works for me:

a, pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
4

You can add a wrapper div and add the next CSS properties

{
   div#wrapper {
      overflow: scroll;
      display: grid;
   }
}
0
2

You could use some CSS properties:

pre {
   display: flex;
   white-space: normal;
   word-break: break-word;
}

Optionally, if <pre> is inside <span>:

span pre {
   display: inline-flex;
}
2
  • 2
    <pre> cannot be inside <span>.
    – Mr Lister
    Jul 10, 2016 at 17:10
  • display:flex... useful when you are using white-space: pre too on iOS. Damned thing wraps text and doesn't obey overflow x rules so long lines continue to right only with display flex...
    – JGFMK
    Dec 4, 2017 at 19:02
1

Add style

pre{
    white-space: break-spaces;
    word-break: break-word;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.