javascript - 如何将呈现的 HTML 代码限制在 div 中

Question

我有一个函数可以将文本区域中的 HTML 代码渲染到特定大小的 div 中。此 div 的大小在页面加载时确定，通常约为浏览器宽度的 45%。我想知道是否有任何方法可以限制呈现的内容不超出此 div 的边界，而是在呈现的内容超出边界时添加滚动条。

基本上，当您呈现 HTML 网页时，我希望此 div 的行为类似于浏览器窗口。这是我的渲染代码:

$(document).ready(function(){
        $("#showmeImg").click(function(){
            $("#outputContainer").html($(myEditor.getValue()));
        });
    });

因此，当“showmeImg”被点击时，“myEditor”的内容被渲染并放置在“outputContainer”div 标签中。对于这个 div 标签，我所拥有的只是基本样式，例如背景颜色、宽度和高度。

Answer 1

您应该能够使用 CSS 获得该效果。如果您以编程方式设置宽度(正如您的问题所暗示的那样)，那么您需要做的就是设置 height 和 overflow 样式以获得所需的行为。像这样:

#outputContainer {
    height: 300px;
    overflow: auto;
}

如果您希望滚动条始终存在(无论当前内容是否需要滚动)，请使用overflow: scroll;。