How to fit code within page limits by using a scroll bar using html or css?-CodePudding

I am trying to put some Python code in my web site. However, the Python code takes the entire width of the page. I have put the code in the pre tags of HTML. This is my code.

    <pre>
                import requests
from bs4 import BeautifulSoup as BS
from bs4 import Comment

with requests.session() as r:
    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0'}
    r = requests.get('https://www.example.com', headers=headers)
    response = r.text
    soup = BS(response, 'html.parser')
    comments = soup.find_all(string=lambda text: isinstance(text, Comment))

    for c in comments:
        print(c)

    </pre>

I am trying to fix this in within 900px because that is the width I allocated for the content of my website. Is there anyway, I can fit this code within the page and add scroll capability

CodePudding user response：

If I understand you question correct, if you want to add horizontal scrolling.

You can add overflow: scroll for horizontal scrolling.
For horizontal-scroll use overflow-x: scroll;
For vertical-scroll use overflow-y: scroll;

import requests
from bs4 import BeautifulSoup as BS
from bs4 import Comment

with requests.session() as r:
    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0'}
    r = requests.get('https://www.example.com', headers=headers)
    response = r.text
    soup = BS(response, 'html.parser')
    comments = soup.find_all(string=lambda text: isinstance(text, Comment))

    for c in comments:
        print(c)

CodePudding user response：

You need a max-width and overflow: auto to get scrollbars when the code is overflowing. If you want the scrollbar to alway show, use overflow-x: scroll. This will add a horizontal scrollbar.

pre {
  max-width: 900px;
  overflow: auto;
}

    <pre>
                import requests
from bs4 import BeautifulSoup as BS
from bs4 import Comment

with requests.session() as r:
    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0'}
    r = requests.get('https://www.example.com', headers=headers)
    response = r.text
    soup = BS(response, 'html.parser')
    comments = soup.find_all(string=lambda text: isinstance(text, Comment))

    for c in comments:
        print(c)

    </pre>