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>

上面的代码是我当前通过 Blazor 元素使用 C# 编写的代码。但这个问题不依赖于编程语言。只是我认为是html、css的问题。

我当前的页面如下:

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

Answer 1

您需要断词(使用断字规则)以避免水平滚动。默认情况下，没有任何空格的长单词不会中断/换行到下一行。请参阅下面的示例。

由于您已经在使用 bootstrap，因此您可以避免使用下面的自定义类，并使用 bootstrap 类 text-break ( documentation ) 而不是示例中的自定义类。

我做了 2 处更改。

• 添加了新类(class)
• 删除了您不需要的类row。您可以拥有它，但应该有一个子 col 或 col-* 类。

.break-word {
 word-break: break-all;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3adb3adb0fff8e9fcac" rel="noreferrer noopener nofollow">[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>