CSS: Comment est-ce que j'emballe le texte sans espace dans un <td>?

Question

Je l'ai utilisé:

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

et le texte drape dans Chrome, mais pas Firefox. Mise à jour: J'ai décidé de changer le design de sorte qu'il n'a pas besoin de l'emballage; essayer de résoudre un problème de CSS/hack se révélait trop frustrant et fastidieux.

Answer 1

Définissez une largeur de colonne pour l'étiquette td.

Answer 2

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 implicitement ou explicitement positionné comme élément fixe ou affiché comme élément de bloc. Pour les cellules de tableau (td), utilisez display: inline-block;.

Answer 3

Une manière légèrement hackish de faire ceci est en traitant le texte pour ajouter l'espace entre chaque lettre. Remplacez les espaces par   Utilisez ensuite l'attribut css letter-spacing pour réduire les espaces.

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

Answer 4

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

Answer 5

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

Il est logique de changer le design.

Cela ressemblait plein d'espoir cependant: http://hacks.mozilla.org/2009/06/word-wrap/

Answer 6

Essayez, je pense que cela fonctionnera pour quelque chose comme « AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG » produira

AARRRRRRRRRRRRRRRRRRRR 
RRGGGGGGGGGGGGGGGGGGGG 
G 

J'ai pris mon exemple de quelques différents sites sur Google . Je l'ai testé 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;  /* css-3 */ 
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> 

Answer 7

Pour une mise en page automatique de la table essayer de style de la td concernée combinant les attributs max-width et mot-wrap.

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

testés dans Firefox 32, Chrome 37 et IE11.

Answer 8

J'utilise angulaire pour mon projet, et a réussi à résoudre ce avec un filtre simple:

Modèle:

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

Filtre:

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

---

Vous ne pouvez pas voir il, mais après $1 il y a un espace invisible (merci @kingjeffrey pour la pointe), qui a permis des pauses de mots pour les cellules de la table.

Answer 9

Voici la version avancée de ce que OP a demandé.

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

Comme

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB 

pause

AAAAAAAAAAAAAAAAAAAAAAA- 
BBBBBBBBB 

Donc, il y a une nouvelle propriété CSS si elle est soutenue, généralement pris 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 celle-ci.

J'espère que quelqu'un aura une telle demande.