html - 试图制作一个垂直截断子元素的滚动框

问题描述

所以基本上我试图在屏幕上拥有一个始终相同大小的固定框，但如果某些东西比框宽，它会被截断到下一行。但相反，它不断使框开始水平滚动，我绝对不希望发生这种情况。

滚动框内部可以是<div> <p> <h1-6> <hr> <img>或<a>标签，我希望它只垂直滚动，我希望任何离开右侧的东西都可以移动到任何子元素的下一行。

但现在它只是水平和垂直滚动。

${html} 是要放入的任何给定的 html 字符串

<div class="col-md-10">
    <div class="Holder">
        <pre>
            ${html}
        </pre>
    </div>
</div>

p{
    overflow-wrap:normal;
}
pre{
    overflow-x: auto;
    border:0;
    background-color:transparent;
}
.Holder{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
}

有什么办法可以让这件事按照我的意愿去做吗？

注意：我目前正在使用 v3.4.1 的 bootstrap.min.css，之后加载了上述 CSS。

标签： htmlcss

我希望它只垂直滚动，并且我希望任何离开右侧的东西都能移动到任何子元素的下一行。

如果我理解正确，这意味着你想将元素包装到下一行，你可以这样做white-space

尝试这个

p{
    overflow-wrap:normal;
}
pre{
    overflow-x: auto;
    border:0;
    white-space: inherit;
    background-color:transparent;
}
.Holder{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
}

.Holder {max-width: 500px; max-height: 150px; overflow-y: auto;}

<div class="col-md-10">
    <div class="Holder">
        <pre>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </pre>
    </div>
</div>

注意这里我已经设置了，max-height只是为了让您看到垂直滚动，您可以稍后将其删除。max-width.holder

html - 试图制作一个垂直截断子元素的滚动框

问题描述

解决方案

推荐阅读