如何約束格內呈現的HTML代碼

Question

我有一個函數可以將HTML代碼從textarea呈現爲一定大小的div。這個div的大小是在頁面加載時確定的，一般大約是瀏覽器寬度的45％。我想知道是否有任何方法來限制呈現的內容不會超出此div的範圍，而是在呈現的內容超出邊界時添加滾動條。

基本上，我想這個div的行爲就像一個瀏覽器窗口，當你呈現一個HTML網頁。下面是代碼我有做渲染：在「outputContainer」 div標籤內

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

所以點擊「showmeImg」時，「的MyEditor」的內容呈現和地點。我所有的div標籤都是基本的樣式，如背景顏色，寬度和高度。

Answer 1

您應該可以使用CSS獲得該效果。如果您以編程方式設置寬度（因爲您的問題似乎暗示），那麼您只需設置height和overflow樣式即可獲得所需的行爲。事情是這樣的：

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

如果你想在滾動條一直在那裏（無論是否需要對當前內容滾動），使用overflow: scroll;。

Answer 2

您應該將CSS Rule'overflow：auto'添加到包含div。如果內容溢出div，滾動條會自動添加。

Answer 3

你試過類似的東西嗎？

#outputContainer { 
    ovwerflow-y: auto; 
} 

當容器內有足夠的內容時，這將添加一個垂直滾動條。 有很多不錯的jQuery插件可以添加更好的滾動條:)。例如， http://enscrollplugin.com/。