"Mastering the art of printing wrapped text with Bootstrap to avoid pesky horizontal scrollbars

My issue is quite straightforward. I am trying to display all content on a web browser without the need for a horizontal scrollbar.

<div class="container">
    <div class="row h-100" style="overflow-y:scroll; padding-left:17px; padding-right:17px">
        @for(int i=0;i<100;i++)
        {
            <div class="row flex-nowrap">
                <div class="col">
                    <div class="row">
                        https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
                        TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTE
                    </div>
                    <div class="row">
                        sfdfsfdsdfdf
                    </div>
                </div>
                <div class="col-auto">
                    TEST Container
                    asddasdsaasdda
                </div>
            </div>
        }
    </div>
</div>

The above code represents my current implementation within a Blazor project using C#. However, this particular issue is not specific to any programming language – it pertains more to HTML and CSS.

As of now, my webpage appears like this: https://i.sstatic.net/3SPaC.png

I aim to showcase the contents of this page without needing a horizontal scrollbar. Unfortunately, this has proven challenging for me. Implementing overflow-x:hidden hides the content, which is not my desired outcome.

htmlcsstwitter-bootstrapbootstrap-4blazor

Answer №1

To prevent horizontal scrolling, it is important to break long words using the word-break rule. By default, words without spaces will not wrap to the next line. See the example below for more clarity.

If you are already utilizing Bootstrap, you can replace the custom class with a Bootstrap class called text-break (documentation). This eliminates the need for the custom class in the given example.

The following changes have been made:

  • Added a new class
  • Removed the class row, which may not be necessary in your case. If retained, ensure there is a child element with the class col or col-*.

.break-word {
 word-break: break-all;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554b554b56191e0f1a4a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container">
    <div class="row h-100" style="overflow-y:scroll; padding-left:17px; padding-right:17px">

            <div class="row flex-nowrap">
                <div class="col">
                    <div class="break-word">
                        https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
                        TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTE
                    </div>
                    <div>
                        sfdfsfdsdfdf
                    </div>
                </div>
                <div class="col-auto">
                    TEST Container
                    asddasdsaasdda
                </div>
            </div>

    </div>
</div>

Answer №2

To optimize your layout, consider simplifying the number of rows and columns you are using. Implementing border-sizing: border-box and margin: 0; in the CSS section of your webpage can help reduce excess padding. Additionally, try adding "no-gutters" to the row element to remove default margins.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

horizontal alignment of row content to the right in HTML

Trying to align a text and a small image horizontally to the right: <div class="row float-right"> <div class="title" >Stream Chat</div> <img src="~assets/chat.svg" /> </div> ...

htmlcssimagegridrow

What is the method in svg.js for accessing the child nodes of an element?

Trying to work with an existing DOM SVG element in my HTML, I utilize the following code svgEle = SVG.adopt(svgDocument.getElementById('svg')); Is there a way to access child elements of svgEle without individually adopting them? elementById ...

javascripthtmlsvgsvg.js

Shrink the size of the rotating banner to its smallest width possible

I have implemented a rotating banner on my website by using the code from unslider.com. The banner consists of four images, each 2080px wide, which is the maximum size I want for my site. I aim to scale both the website and the images down to a minimum wid ...

jqueryhtmlcss

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

Steps to make a multi-image rollover effect similar to Facebook albums

Is there a way to change multiple images within a Facebook album when hovering over just one image, rather than only being able to change one image at a time using the rollover effect? ...

javascriptcss

What methods can be used to identify the specific Router component being rendered in React?

I am currently working with a Navbar component that I want to render with different CSS styles using styled-components based on the route of the component being rendered. How can I determine whether that component is being rendered or not? const NavbarCont ...

cssreactjsreact-routerstyled-components

Embedding an Iframe in the Main URL

I have a specific request where I've inserted an anchor tag within an IFRAME. Currently, when the anchor link is clicked, the page redirects within the IFRAME. However, I need the functionality to redirect to the main URL instead of staying within the ...

phphtmliframe

Utilizing objects from a JSON file within an HTML document

I'm currently in the process of creating a comprehensive to-do list, and I want to establish a JSON file that will link all the items on the list together. Despite my efforts, I find myself uncertain about the exact steps I need to take and the speci ...

javascripthtmlarraysjsonobject

Incorporating the chosen value from a dropdown box as a variable in PHP

Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...

javascriptphpjqueryhtmlajax

Utilizing MUI alongside Tailwind CSS in conjunction with NextJS: Here's a solution for resolving the transparent button issue without compromising the utilization of Tailwind CSS preflight

Currently working on a project built on top of a NextJS template using TailwindCSS. Struggling to integrate MUI components due to unexpected behavior with the button element (White Button error in NextJS Project). While I am aware of solutions suggesting ...

cssreactjsnext.jsmaterial-uitailwind-css

Issue with injection occurring due to the utilization of ui-bootstrap

Encountered issue: $confirmModalProvider <- $confirmModal <- confirmModalCtrl Why is this error popping up? I am attempting to utilize AngularJS UI Bootstrap for launching a modal and fetching the result. This error arises when I call $scope.deleteQ ...

javascriptangularjstwitter-bootstrapangular-uibootstrap-modal

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

javascriptcssreactjsnext.jstailwind-css

Adjacent buttons

I am trying to place two buttons side by side, but they keep appearing stacked on top of each other. Can anyone help me figure out how to solve this? Here's the code: Styling (CSS): <style type="text/css"> .button_example{ border:1px solid #B ...

htmlcss

Identify the UNFINISHED section of a Bootstrap Progress Bar

Is there a way to customize the color and add labels to both the complete and incomplete sections of a progress bar in Bootstrap 3? Here is an example: https://i.sstatic.net/F8iEq.png I understand that I can set a CSS background for the entire .progress ...

csstwitter-bootstrapprogress-bar

What is the best method to store the name of an image as a session variable?

<!--images acting as buttons--> <form> <img src="peanuts.jpg"" class="qac left" onclick="qac_search()" name="Peanuts"> <img src="milk.jpg" class="qac" onclick=&qu ...

phphtmlvariablesbuttonsession-variables

Creating a CSS style that automatically adjusts the font size within a container that spans the full height of the

Issue: I have a container set to 100vh, but as the screen size changes, I want the font size to adjust accordingly and always stay within the container without overflowing. Thoughts: While I understand this can be achieved easily with @media CSS rules, I& ...

javascripthtmlcss

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

javascriptcssangularjsangular-ui-bootstrapcss-animations

Need help troubleshooting the error "void android.webkit.WebView.setBackgroundColor(int)' on a null object?

When the background webview is provided and an error occurs during runtime, how can this error be resolved? The recipe_description = findViewById(R.id.recipe_description); but no data is received in the webview. How can this issue be fixed? It seems that ...

androidhtml

Unable to show an image within the <div> element when hovering the mouse

Is it necessary to use the background style image in order to display an image on mouseover of a name? I have implemented a controller and would like the image to be replaced by text within a div tag. Below is my HTML code: <!DOCTYPE html> <html& ...

javascriptangularjshtml

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar