Скачать или смотреть Preventing Overflow with Monospace Text on Small Viewports Using Bootstrap 5

Learn how to handle monospace text in Bootstrap 5 to avoid overflow issues on small viewports while maintaining an optimal user experience.
---
This video is based on the question https://stackoverflow.com/q/73859534/ asked by the user 'Mark Abersold' ( https://stackoverflow.com/u/417772/ ) and on the answer https://stackoverflow.com/a/73859654/ provided by the user 'IT goldman' ( https://stackoverflow.com/u/3807365/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Bootstrap 5: How to prevent overflow with monospace text on small viewport?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Preventing Overflow with Monospace Text on Small Viewports Using Bootstrap 5

When building web applications, you may encounter a scenario where you need to display long text in a monospace font. This requirement often arises when displaying ASCII art or other fixed-width content. While it looks great on larger screens, issues may arise in smaller viewports where the text overflows, creating a horizontal scroll bar not only within the text container but across the entire page.

In this guide, we will explore an effective solution to prevent overflow with monospace text in Bootstrap 5, ensuring a seamless experience for mobile users.

The Problem

In a web application you're developing, you've set up the HTML structure for displaying monospace text as shown below:

[[See Video to Reveal this Text or Code Snippet]]

On larger screens, this works perfectly as intended. However, when viewed on a mobile device, the long string of text extends beyond both the outer and inner divs. This not only causes layout issues but also results in an unwanted horizontal scroll bar for the entire page, making it inconvenient for users to read the content.

To counteract this problem, you want the text to be contained within the inner div on small devices, allowing users to scroll left or right only within that specific area.

The Solution

To achieve the desired outcome, you can use a combination of CSS properties to control how the text is managed within your inner div.

CSS Properties to Use

white-space: nowrap;
This property ensures that the text does not wrap onto a new line, which is essential for maintaining the integrity of ASCII art and preformatted text.

overflow-x: auto;
This property enables horizontal scrolling when the content exceeds the width of the container. This way, only the inner div will scroll, keeping the layout of the entire page intact.

Implementation

Now, let's update your CSS codes for the # inner div as follows:

[[See Video to Reveal this Text or Code Snippet]]

Final HTML Example

Make sure you incorporate the CSS modifications into your full HTML setup, which should look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By applying the correct CSS rules — white-space: nowrap; and overflow-x: auto; — you can effectively manage long monospace text on small viewports. This adjustment allows for a better user experience on mobile devices, keeping all content neatly contained within the inner div, while also providing users the ability to scroll horizontally when necessary.

Incorporate these practices into your Bootstrap 5 projects to enhance usability and maintain a pleasant display for all screens!