'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. 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.

htmlpre


Solution 1:[1]

add style: 

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

Solution 2:[2]

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

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

Solution 3:[3]

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

Solution 4:[4]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vlad Chyorny
Solution 2 Tinmarino
Solution 3 Mr Lister
Solution 4 Artem Dumanov

Related Questions