Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 546
Melbin Mathai Avatar asked Aug 08 '16 10:08

Melbin Mathai


People also ask

Why is text wrapping not working in word?

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.

Why wont word let me wrap an image?

Make sure the Position tab at the top is selected. Place a checkmark in "Wrap text within text boxes for overlay objects."

How do I turn word-wrap on?

To prevent the text from wrapping, you can use the CSS white-space property with the “nowrap” or “pre” value.

Why word-break is not working in CSS?

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 .


3 Answers

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> 
like image 168
z0mBi3 Avatar answered Oct 09 '22 21:10

z0mBi3


Try this DEMO

Add to CSS:

word-wrap:break-word
like image 44
Gunjal Ray Avatar answered Oct 09 '22 21:10

Gunjal Ray


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> 
like image 30
Gowtham Avatar answered Oct 09 '22 21:10

Gowtham