無需調整大小重新縮放div內容

我正在尋找一個解決方案來重新縮放具有固定寬度和高度的div的內容。現在，我有一個div像這樣：無需調整大小重新縮放div內容

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

我加載動態HTML內容到這個div，通過使用CKEditor的（http://ckeditor.com/）

的由於輸入文本可能包含不同的字體大小，我我正在尋找一種降低溢出內容的方法。

現在我想正確的方法是使用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大小
下限值內容
沒有溢出

來源

2014-04-17 GeorgeB

您是否嘗試過使用的最小高度和最大高度的標籤，除了高度和寬度的標籤？ – Helpful

對不起，不把我的帖子，但是，我已經嘗試過。不幸的是，'zoom'函數似乎覆蓋了這些參數。可能必須使用不同的縮放形式，我只是不知道要尋找什麼。 – GeorgeB

也許嘗試，當變焦第一次變化時，將div的內容放入一個子div中，然後放大該子div？ – Helpful

在這裏黑暗只是一個鏡頭。似乎你在做我的技能水平以上的事情，但使用rem的情況如何？然後用font-size控制它：50％;？

CSS

body{ 
    font-size: 1rem; 
} 

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

來源

2014-04-19 07:35:57

無需調整大小重新縮放div內容

回答

相關問題