Bootstrap 5：如何防止小视口上的等宽文本溢出？

Question

在我正在开发的 web 应用程序中，我想使用等宽字体显示一些文本。 这样做的原因是文本可以包含诸如 ASCII 艺术之类的东西，因此保持等宽显示很重要。 此外，它不能环绕，因为这会破坏显示。

我的 html 看起来像这样：

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

在大型显示器上，这工作得很好，并且完全按照我的意愿显示。 但是，在移动显示器上，文本会延伸到外部和内部 div 之外，它会为整个页面创建一个水平滚动条。

我希望文本完全显示在内部 div 中。 在像手机这样的小视口上，我希望水平滚动条只在内部 div 上，这样它就不会弄乱整个页面的显示。 这样，移动用户只需在该内部 div 上向左或向右滑动即可查看其中的文本。

我需要改变什么才能做到这一点？

Answer 1

whitespace: nowrap 将防止换行，而 overflow-x 将负责自动滚动

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

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <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 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>