javascript - 在不调整大小的情况下重新缩放 div 内容

Question

我正在寻找一种解决方案来重新缩放具有固定宽度和高度的 div 的内容。 现在我有一个像这样的 div :

<div id="editor_preview" style="width:360px !important;
                                color:gray;
                                margin-top:40px;
                                position:absolute;
                                overflow:auto;
                                height:190px !important">
</div>

我正在使用 CKEditor ( http://ckeditor.com/ ) 将动态 HTML 内容加载到这个 div 中

由于输入文本可能包含不同的字体大小，我正在寻找一种方法来缩小溢出时的内容。

我现在正在尝试的方法是使用 javascript 和缩放功能，如下所示:

document.getElementById(ev.editor.name + '_preview').innerHTML = ev.editor.getData();
var container = document.getElementById(ev.editor.name + '_preview');
var i = 99.9;

if (container.scrollHeight > container.clientHeight) {
    while (container.scrollHeight > container.clientHeight) {

        container.style.zoom = i + "%";
        i -= 0.1;
    }
}

但是；这也会减小 div 的大小以匹配内容。所以简而言之，我想要的是:

• 保持div大小
• 缩小内容
• 没有溢出

Answer 1

这里只是在黑暗中拍摄。看起来你做的事情超出了我的技能水平，但是使用 rem 呢？然后用 font-size: 50%;?

控制它

CSS

body{
    font-size: 1rem;
}

#editor_preview{
    font-size: 50%; // control text size here
}