Question

＆＃13;

<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;">					
  </div>

</div>

＆＃13;

这段代码对我来说很好。当我点击保存按钮时，内容将保存到另一个div。

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

我在这里保存文字。

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

但是内容太长了，它溢出到了div的外面。我想要我div中的所有文本。我试过 white-space，自动换行这些对我来说不起作用。请帮我。谢谢。

Answer 1

为防止div内容溢出，您需将其添加到css

// to hide the contents
overflow: hidden;

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

如果出现溢出，auto将自动创建滚动条

Answer 2

使用word-wrap

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

JSFIDDLE

防止div内容溢出

2 个答案: