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
}

重新缩放div内容而不调整大小

1 个答案: