How to print wrapped text without horizontal scrollbar using bootstrap?

user_8485851 0
Viewed 455

My question is very simple. I want to show all contents on web browser without 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>

Above code is my current code via Blazor project in C#. But this problem is not depend on programming language. Just I think that html, css problem.

My current page is as follows: enter image description here

I want to show contents of this page without horizontal scrollbar. But It is not easy to me. If I use overflow-x:hidden, then contents is hidden. I want not it.

bootstrap-4 twitter-bootstrap blazor css html
2 Answers

You need to break word (using word-break rule) to avoid horizontal scroll. By default long words without any space will not break/wrap to next line. Please see below example.

Since you are already using bootstrap you can avoid the custom class below and use bootstrap class text-break (documentation) instead of the custom class in example.

I have done 2 changes.

  • Added a new class
  • Removed class row which in your case dont need. You can have it but there should be a child col or col-* class.

.break-word {
 word-break: break-all;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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>

user_11883220

You are using too many rows and columns. Try making border-sizing: border-box and margin: 0; in the CSS part of your page. According to my every row takes some default margin padding. use "no-gutters" in the row.

user_134556710
Related