devopsEMK devopsEMK - 4 months ago 15
HTML Question

HTML <pre> tag values get horizontal scroll bars,how to format it?

This image show what i happens in my code
This is my blog page. Some of my posts have

C#
code blocks. For this, I use
<'pre'>
tags.
pre
tag width is 100% and it has a background color. However, the text went away from it as in the below picture. How can I overcome this? I don't want bottom scroll bar.

Answer

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 http://www.w3schools.com/cssref/pr_text_white-space.asp 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 when 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.
Comments