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

</div>

This code is works fine for me. And when I click on the save button, the contents are save to another div.

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

Here I am save the text.

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

But the contents are too long, it overflow to the outside of the div. I want all the texts inside of my div. I tried the white-space, word-wrap these are not works for me. Please help me. Thank You.

2
  • Please show an example of content that is overflowing. There's nothing overflowing in the example HTML.
    – JJJ
    Jul 22, 2016 at 10:42
  • Have tried setting "overflow:hidden" css rule to your div?
    – David R
    Jul 22, 2016 at 10:43

2 Answers 2

1

To prevent the div contents from overflowing you will add this to your css

// to hide the contents
overflow: hidden;

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

The auto will automatically create the scroll bars if there is an overflow

2
  • but I don't want show the scroll bar. Scroll bar should be hidden. Jul 22, 2016 at 11:08
  • If you don't want the scroll bars to show then you use overflow:hidden; but if you don't want the text to be hidden also the use the word-wrap:break-word; Jul 22, 2016 at 14:42
1

Use word-wrap

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

JSFIDDLE

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.