如何使用引导程序打印没有水平滚动条的包装文本？答案

【问题标题】：How to print wrapped text without horizontal scrollbar using bootstrap?如何使用引导程序打印没有水平滚动条的包装文本？
【发布时间】：2021-03-22 12:46:22
【问题描述】：

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

<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，则内容被隐藏。我不要它。

【问题讨论】：

@kiranvj 谢谢回复。我申请了，但是没有用。

标签： html css twitter-bootstrap bootstrap-4 blazor

【解决方案1】：

您使用了太多的行和列。尝试制作边框大小：边框框和边距：0；在页面的 CSS 部分。根据我的每一行需要一些默认的边距填充。在行中使用“no-gutters”。

【讨论】：

【解决方案2】：

您需要断字（使用word-break 规则）以避免水平滚动。默认情况下，没有任何空格的长单词不会中断/换行到下一行。请看下面的例子。

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

我做了 2 处更改。

添加了一个新类
删除了 row 类，在您的情况下不需要。你可以拥有它，但应该有一个孩子 col 或 col-* 类。

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

【讨论】：

@TaehyungKim 你也可以使用引导类text-break，正如我在答案中更新的那样