html - 如何使用 Bootstrap 在没有水平滚动条的情况下打印包装文本？

Question

我的问题很简单。我想在没有水平滚动条的网络浏览器上显示所有内容。

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

上面的代码是我在 C# 中通过 Blazor 元素当前的代码。但是这个问题不依赖于编程语言。只是我觉得是html、css的问题。
我现在的页面如下:

我想在没有水平滚动条的情况下显示此页面的内容。但这对我来说并不容易。如果我使用 overflow-x:hidden ，则隐藏内容。我不要。

Answer 1

您需要打破单词(使用 word-break 规则)以避免水平滚动。默认情况下，没有任何空格的长单词不会中断/换行到下一行。请看下面的例子。
由于您已经在使用 bootstrap ，您可以避免使用下面的自定义类并使用 bootstrap 类 text-break ( documentation ) 而不是示例中的自定义类。
我做了2个改动。

添加了一个新类

删除类(class) row在你的情况下不需要。你可以有，但应该有个 child col或 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>