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

Question

I am looking for a solution to re-scaling the contents of a div with a fixed width and height. Right now i have a div like so :

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

I am loading dynamic HTML content into this div, by the use of CKEditor ( http://ckeditor.com/ )

Since the input text may contain different font sizes, I am looking for a way to downscale the contents on overflow.

The way I'm trying right now is using javascript and the zoom function like so :

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;
    }
}

However ; this also decreases the size of the div to match the content. So in short what i want is :

• Keep the div size
• Downscale the content
• No overflow

Answer 1

Just a shot in the dark here. Seems like you're doing things above my skill level, but what about using rem? Then controlling it with font-size: 50%;?

CSS

body{
    font-size: 1rem;
}

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