Je viens de créer un div. et je donne une fonction White-space: Normal pour l'habillage de mots lorsque je tape le contenu. Cette fonction fonctionne dans Chrome, Opera et Safari Browser. Mais les mots ne s'enroulent pas dans Mozilla Firefox et le navigateur Edge. Et j'ai aussi essayé la fonction Word-wrap: break-word. Cela ne fonctionne pas non plus. Veuillez me donner une 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> 
5
Melbin Mathai 8 août 2016 à 13:46

3 réponses

Meilleure réponse

Vous devez ajouter word-break: break-all si vous avez besoin de casser un long mot

<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> 
5
z0mBi3 8 août 2016 à 10:49

Utilisez la propriété suivante:

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

Et 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> 
1
Ivanka Todorova 8 août 2016 à 11:46

Essayez cette DEMO

Ajouter au CSS:

word-wrap:break-word
1
Gunjal Ray 8 août 2016 à 10:50