Melbin Mathai Melbin Mathai - 4 months ago 18
CSS Question

Word wrapping is not working

This I just created a div. and I give a

White-space: Normal
function for word wrapping when I type the contents. This function is working in Chrome,Opera and Safari Browser. But the words are not wrapping in Mozilla Firefox and Edge browser. And also I tried the
Word-wrap: break-word
function. This is also not working. Please give me a solution.



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




Answer

You need to add word-break: break-all if you need to break a long word

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