For a web app I am developing, I need to showcase certain text using a monospace font. This is necessary because the text may include elements like ASCII art, requiring a consistent monospace alignment. Moreover, it's crucial that the text does not wrap around as it could disrupt the intended display.
Here is a snippet of my HTML code:
<body>
<div id="outer" class="container-sm pt-2 bg-light rounded-bottom">
<div id="inner" class="text-warning bg-dark rounded p-3 font-monospace">
Text that is very long and exceeds the width of a mobile display
</div>
</div>
</body>
While this works effectively on larger screens, issues arise on mobile devices where the text overflows beyond both outer and inner divs, causing horizontal scrolling for the entire page.
I aim to confine the text within the inner div, especially on smaller viewports like mobile phones. Ideally, I want the horizontal scroll bar to appear solely within the inner div, preserving the overall page layout. This way, mobile users can easily swipe left or right within the inner div to access the complete text.
What modifications should I make to achieve this desired behavior?