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

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)

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

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

add style:

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

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; }