防止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溢出

回答

相关问题