web-dev-qa-db-fra.com

Comment puis-je faire Firefox Word-break avec CSS?

Voici mon code jusqu'à présent:

<div style="width:100px;height:100px;background:red">
            ssssssssssssssssssssssssssssssssssssss
</div>

Cependant,

Word-wrap:break-Word;
Word-break:break-all;

ne se révèle pas utile, car il ne peut pas passer par Word-wrap sur Firefox. Que puis-je faire en utilisant CSS?

cssfirefoxword-wrap
42
zjm1126
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
Word-wrap: break-Word; /* Internet Explorer 5.5+ */
width:200px;

Le code ci-dessus fonctionne à merveille pour moi

55
2lessons

Utilisez ensemble les règles suivantes:

/* For Firefox */
white-space: pre-wrap;
Word-break: break-all;

/* For Chrome and IE */
Word-wrap: break-Word;
30
gsklee

Vous devez appliquer la classe css ci-dessous sur div:

.content-div{
    Word-break:break-all;
    Word-wrap: break-Word;
}

Et ajoutez ci-dessous le style sur la table qui est lié en div

style='table-layout:fixed;width:306px;'

Il fonctionnera sur IE7, FF 3.6 et Chrome.

18
Pankaj Pareek

vous utilisez la largeur et les propriétés d'affichage avec la propriété Word-wrap:

width: 100px;
Word-wrap: break-Word;
display:inline-block;

Cela fonctionne pour moi à la fois dans IE et dans FF.

11
Lida

cela fonctionne de cette façon pour Firefox:

Word-break: initial;
Word-wrap: break-Word;
9
Mau

Cela fonctionne bien pour moi:

/* For Firefox */
white-space: pre-wrap;
overflow-wrap: break-Word;

/* For Chrome and IE */
Word-wrap: break-Word;

Il semble que le débordement est quelque chose de nouveau dans Firefox. Plus d'informations peuvent être trouvées ici:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

6
Kaloyan Stamatov

Comment essayons-nous ceci:

div{ overflow-wrap:break-Word; }
2
darcher

Word-break: break-Word est obsolète. Tu devrais utiliser: Word-break: normal; overflow-wrap: anywhere

0
Uğur Mutlu

J'avais besoin d'une combinaison de plusieurs réponses pour le faire fonctionner dans les deux Chrome et Firefox pour moi:

.white-space-pre-wrap {
  white-space: pre-wrap;
  Word-break: break-all;
  Word-wrap: break-Word;
  display: inline-block;
}
0
carmenism