CODEWITHSUNDEEP
javascripthtmlcss
Melbin Mathai
Melbin Mathai

Reputation: 507

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>

Upvotes: 5

Views: 125

Answers (3)

Gowtham
Gowtham

Reputation: 1597

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>

Upvotes: 1

Gunjal Ray
Gunjal Ray

Reputation: 165

Try this DEMO

Add to CSS:

word-wrap:break-word

Upvotes: 1

z0mBi3
z0mBi3

Reputation: 1544

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>

Upvotes: 5

Related Questions