वर्ड रैपिंग काम नहीं कर रहा है

Question

यह मैंने अभी एक div बनाया है। और जब मैं सामग्री टाइप करता हूं तो मैं White-space: Normal शब्द रैपिंग के लिए फ़ंक्शन देता हूं। यह फ़ंक्शन क्रोम, ओपेरा और सफारी ब्राउज़र में काम कर रहा है। लेकिन मोज़िला फ़ायरफ़ॉक्स और एज ब्राउज़र में शब्द लपेट नहीं रहे हैं। और मैंने Word-wrap: break-word फ़ंक्शन का भी प्रयास किया। यह भी काम नहीं कर रहा है। कृपया मुझे एक समाधान दें।

<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 1

आप आप एक लंबे शब्द

<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>

Answer 2

तोड़ने के लिए इस DEMO

प्रयास करें की जरूरत है word-break: break-all जोड़ने की जरूरत

सीएसएस में जोड़ें:

word-wrap:break-word 

Answer 3

उपयोग निम्नलिखित संपत्ति:

white-space: -moz-pre-wrap;//For firefox 
word-wrap: break-word; 

और एचटीएमएल:

<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>