Comment envelopper du texte sans espace dans un <td>?

J'ai utilisé:

word-break:break-all;
table-layout:fixed;

et le texte s'enroule dans Chrome mais pas dans Firefox.

Mise à jour: j'ai décidé de changer le design pour qu'il n'ait pas besoin de l'habillage; essayer de trier un correctif / hack CSS s'est avéré trop frustrant et chronophage.

Essayez ceci, je pense que cela fonctionnera pour quelque chose comme "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGG" produira

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

J'ai pris mon exemple sur quelques sites Web différents sur Google. J'ai testé cela sur ff 5.0, IE 8.0 et Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Utilisez CSS3 word-wrap: break-word;. Fonctionne également dans les navigateurs basés sur WebKit (Safari, Chrome).

Mise à jour : j'ai oublié, l'élément en question doit cependant être soit implicitement soit explicitement positionné comme élément fixe ou affiché comme élément de bloc. Pour les cellules de tableau ( td), utilisez display: inline-block;.

Voici une version avancée de ce qu'OP a demandé.

Parfois, ce qui se passe, c'est que notre client veut que nous donnions «-» après un saut de mot à la fin de la ligne.

Comme

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

pause pour

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Ainsi, il existe une nouvelle propriété CSS si elle est prise en charge, généralement prise en charge dans les derniers navigateurs.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

J'utilise celui-ci.

J'espère que quelqu'un aura une demande comme celle-ci.

Pour une mise en page automatique du tableau, essayez de styliser le td concerné en combinant les attributs max-width et word-wrap.

Par exemple: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Testé dans Firefox 32, Chrome 37 et IE11.

Vous pouvez injecter manuellement des espaces de largeur nulle (& # 8203;) pour créer des points de rupture.

Définissez une largeur de colonne pour la tdbalise.

Je pense que c'est un problème de longue date dans Firefox, qui renvoie à Mozilla et Netscape. Je parie que vous rencontrez un problème avec l'affichage des URL longues. Je pense que c'est un problème avec le moteur de rendu plutôt que quelque chose que vous pouvez résoudre avec CSS, sans quelques hacks horribles.

Cela a du sens de changer la conception.

Cela semblait cependant encourageant: http://hacks.mozilla.org/2009/06/word-wrap/

J'utilise Angular pour mon projet et j'ai réussi à résoudre ce problème avec un simple filtre:

Modèle:

<td>{{string | wordBreak}}</td>

Filtre:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

Vous ne pouvez pas le voir, mais après $1il y a un espace invisible (merci @kingjeffrey pour le conseil), qui a permis les sauts de mots pour les cellules du tableau.

Une manière légèrement hackeuse de faire cela est de traiter le texte pour ajouter un espace entre chaque lettre. Remplacez les espaces par  Ensuite, utilisez l'attribut css d'espacement des lettres pour réduire les espaces.

Je sais, c'est un hack ... mais si RIEN d'autre ne fonctionne, il devrait s'enrouler sans problème.