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

89

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.

css

— FunLovinCoder
source

202

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>

— Stirling
source

10

Aie!! Cela forcera à casser N'IMPORTE QUEL mot à des points arbitraires, même si cela n'est pas nécessaire. Existe-t-il une solution de contournement pour avoir ces mots de rupture UNIQUEMENT lorsqu'il est nécessaire de ne pas dépasser la largeur du conteneur? Autrement dit, pour que cela fonctionne comme "word-wrap: break-wird" est censé fonctionner en premier lieu s'il n'était pas bogué?

— matteo

1

@matteo cette réponse a mieux fonctionné pour moi pour cette raison même: stackoverflow.com/a/18706058/234132

— dochoffiday

2

Le problème de rupture de force peut être résolu avecword-break: break-word;

— user1721713

1

Je me suis inscrit au débordement de pile juste pour aimer ça

— falky le

24

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

— BalusC
source

1

J'ai essayé les deux (séparément), mais malheureusement, ils ont gâché le formatage du tableau.

— FunLovinCoder du

Mon mauvais, utilisez display: inline-block;.

— BalusC

13

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.

— Rahul
source

11

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.

— XDM
source

Je ne comprends pas pourquoi, mais cela ne fonctionne qu'avec max-widthet pas avec width. Néanmoins, la meilleure solution pour moi, car elle ne rompt pas les mots à des points arbitraires.

— Raziel

Aussi ennuyeux que les pourcentages ne fonctionnent pas

— yfeleke

4

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

— roijeffrey
source

1

Il existe également une balise HTML non standard <wbr>[pour "word break"]. Voici le support du navigateur pour cela et la solution: quirksmode.org/oddsandends/wbr.html

— kingjeffrey

3

Définissez une largeur de colonne pour la tdbalise.

— Grenouille noire
source

0

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/

— dunxd
source

0

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.

— Jeffrey Roosendaal
source

-1

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.

— Armstrongest
source

2

C'est tellement hacky, tellement perturbant l'indexation correcte et si difficile à mettre en œuvre que cela ne devrait pas être une réponse du tout :-)

— Capsule