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

C'est mon code pour l'instant:

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

Cependant,

word-wrap:break-word;
word-break:break-all;

ne s'avère pas utile, car il ne peut pas word-wrap sur Firefox.
Ce que je peux faire, à l'aide de CSS?

InformationsquelleAutor zjm1126 | 2010-11-26
  1. 55
    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;

    Ci-dessus morceau de code qui fonctionne pour moi à merveille

    • Pourquoi la largeur de la critique? Est-il possible de l'avoir à utiliser la largeur du conteneur?
    • superbe copain +1
    • il a travaillé pour moi, j'ai dû ajouter white-space: pre-wrap !important;
    • Ne fonctionne pas si l'élément a display:flex. C'est censé être comme ça, d'après les specs, ils ont dit dans le rapport de bug bugzilla.mozilla.org/show_bug.cgi?id=1136818
    • J'étais à s'affairer avec certains de la croix-navigateur compatible avec les styles css pour une bonne demi-journée de travail et c'est la première solution qui a effectivement résolu mon problème. Bravo!!
    • posté 2012 fonctionne toujours 🙂
    • Vous pouvez maintenant utiliser overflow-wrap: break-word en place de word-wrap, voir developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

    InformationsquelleAutor 2lessons
  2. 30

    Utiliser les règles suivantes ensemble:

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

/* For Chrome and IE */
word-wrap: break-word;
    • pre-wrap propriété crée l'espace blanc supplémentaire sur Chrome
    • Google Chrome ne répond pas à word-wrap, seulement word-break.
    InformationsquelleAutor gsklee
  3. 17

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

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

    Et ajouter en dessous de style sur la table qui est lier en div

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

    Il va travailler sur IE7, FF 3.6 et Chrome.

    • Cela n'a pas fonctionné pour moi, l' @2lessons réponse n'a
    • vous devez fournir un lien - l'ordre des réponses dépend de la voix ou l'ordre que vous avez choisi sur votre propre.
    • Il a travaillé pour moi, j'ai une classe avec ces styles, j'ai ajouté à la classe de p, div, et d'autres balises qui sont à l'intérieur de bootstrap de 4 colonnes
    InformationsquelleAutor Pankaj Pareek
  4. 11

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

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

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

    • pour une raison quelconque, j'ai besoin de l'display:inline-block dans FF
    • Pourquoi la largeur de la critique? Est-il possible de l'obtenir à l'utilisation de la largeur de la div?
    InformationsquelleAutor Lida
  5. 9

    il fonctionne de cette manière pour Firefox:

    word-break: initial;
word-wrap: break-word;
    InformationsquelleAutor Mau
  6. 6

    Qui fonctionnent pour moi bien:

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

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

    Il semble débordement-wrap 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

    • "La propriété était à l'origine un non standard et unprefixed Microsoft extension appelée word-wrap, et a été mis en œuvre par la plupart des navigateurs avec le même nom. Il a depuis été rebaptisé overflow-wrap, avec word-wrap être un alias."
    • Ressemble seulement à l'aide de la section Pour Firefox fonctionne bien à la fois dans Firefox et Chrome.
    InformationsquelleAutor Kaloyan Stamatov
  7. 2

    Faire sur nous essayez ceci:

    div{ overflow-wrap:break-word; }
    InformationsquelleAutor darcher
  8. 0

    word-break: break-word est obsolète. Vous devez utiliser:
    word-break: normal; overflow-wrap: anywhere

    InformationsquelleAutor Uğur Mutlu
  9. -2

    Utiliser le dessous des styles il a bien fonctionné pour moi dans mozilla firefox.

    word-wrap: break-word;
display:block;
    InformationsquelleAutor Ramya