防止DIV溢出

-2

<div class = "board" style = " min-height: 80px; border-radius: 3px; background-color: #e2e4e6; "> 
 

 
    <div class = "list" style = "white-space: normal; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div> 
 

 
    <div style = "width: 250px; height: 35px; margin-top: 5px;"> 
 
    <input class = "save" type="button" value="Save" style = "cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;" > 
 

 
    <img class = "close" src = "media/icons/close.png" width="27" height="27" style = "cursor: pointer; margin-top: 3px; margin-left: 5px;"> \t \t \t \t \t 
 
    </div> 
 

 
</div>

此代碼是內容爲我工作得很好。當我點擊保存按鈕時，內容保存到另一個div。

$('.save').on('click', function() { 
     var listName = $('.list').text();

在這裏，我保存文本。

var listNameContent = $('<div class = "list-name-content">'+ listName +'</div>');

但內容太長，它溢出到div的外部。我想要我的div內的所有文本。我嘗試了白色空間，文字包裝這些都不適合我。請幫幫我。謝謝。

來源

2016-07-22 Melbin Mathai

請顯示溢出內容的示例。示例HTML中沒有任何溢出。 – JJJ

試過將「overflow：hidden」css規則設置爲你的div嗎？ –

嘗試溢出：自動 – chirag

爲了防止溢出，你將它添加到div內容您css

// to hide the contents 
overflow: hidden; 

// to make a scroll bar for the contents 
overflow: auto;

的auto將自動創建滾動條，如果有一個溢出

來源

2016-07-22 10:45:14

但我不想顯示滾動條。滾動條應該隱藏。 –

如果你不想滾動條顯示，那麼你使用'overflow：hidden;'但是如果你不想讓文本被隱藏，也可以使用'word-wrap：break-word;' –

使用word-wrap

.someClass{ 
    word-wrap: break-word; 
}

JSFIDDLE

來源

2016-07-22 10:45:54 brk

這也是不起作用。 –

防止DIV溢出

回答

相關問題