Bootstrap 5: How to prevent overflow with monospace text on small viewport?-CodePudding

In a webapp I'm working on, I want to display some text using a monospace font. The reason for this is that the text can contain things such as ASCII art, so it's important to maintain the monospace display. In addition, it can't wrap-around, as that would ruin the display.

My html looks like this:

<body>
    <div id="outer" >
        <div id="inner" >
            Text that is very long and exceeds the width of a mobile display
        </div>
    </div>
</body>

On a large display, this works just fine and displays exactly as I would like. However, on a mobile display, the text extends out beyond both the outer and inner divs, and it creates a horizontal scroll bar for the entire page.

I want the text to display completely within the inner div. On a small viewport like a mobile phone, I would like the horizontal scroll bar to only be on the inner div, so that it doesn't mess up the display of the entire page. This way a mobile user will only have to swipe left or right on that inner div to view the text within it.

What do I need to change to accomplish this?

CodePudding user response：

whitespace: nowrap will prevent wrapping whereas overflow-x will take care of the auto scroll

#inner {
  font-family: monospace;
  overflow-x: auto;
  white-space: nowrap;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">


<body>
  <div id="outer" >
    <div id="inner" >
      Text that is very lonsdf sdf sd ffsd fsdf sdf sdf sdf sdf g and exceeds the width of axcvkxcvklj lxkj ldjkf ljsdrer ver er sdf sdf werer flkdjsfjfd df mobile display
    </div>
  </div>
</body>