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>
The advanced options in the Word Options dialog box. Make sure the Show Text Wrapped Within the Document Window check box is cleared. Click OK.
Make sure the Position tab at the top is selected. Place a checkmark in "Wrap text within text boxes for overlay objects."
To prevent the text from wrapping, you can use the CSS white-space property with the “nowrap” or “pre” value.
Word-Break has nothing to do with inline-block . Make sure you specify width and notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap .
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>
Try this DEMO
Add to CSS:
word-wrap:break-word
Use the following property:
white-space: -moz-pre-wrap;//For firefox
word-wrap: break-word;
And html:
<div class = "list-name-field" id = "SAVE_LIST" style =" width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; white-space: -moz-pre-wrap; word-wrap: break-word; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With