web-dev-qa-db-fra.com

CSS Word-wrap: break-Word ne fonctionne pas sur IE9

J'ai un petit script CSS qui force <a> tag Word-wrap dans une div. Cela a bien fonctionné sur FF, Chrome mais n'a pas fonctionné sur IE9. Comment puis-je le corriger?

.tab_title a{
    Word-wrap: break-Word;
}
cssinternet-explorerword-wrap
24
hungneox

Je supprime la balise d'ancrage après .tab_title classe et ça marche

3
hungneox

Pour un problème similaire, j'ai utilisé display: inline-block sur le <a> tag, ce qui semble aider. Et Word-break: break-all car je m'inquiétais du fait que les URL longues ne soient pas encapsulées.

Donc, dans votre cas, essentiellement ...

.tab_title a {
    display: inline-block;
    Word-break: break-all;
}
25
Si Clancy

Cela pourrait faire l'affaire: http://www.last-child.com/Word-wrapping-for-internet-Explorer/

Un autre poste suggère également d'appliquer Word-break:break-all et Word-wrap:break-Word à elle.

11
Duke Hall

Pour moi, cela a fonctionné dans les deux Chrome et IE avec:

.Word-hyphen-break {
  Word-break: break-Word;
  Word-wrap: break-Word;
  width: 100%;
}

comme ça, pas besoin de configurer une largeur spécifique.

9
anniete

Essaye ça:

.tab_title a{
    -ms-Word-break: break-all;
    Word-break: break-all;
    Word-break: break-Word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
7
Danny Connell

Word-wrap: Word-break; ne fonctionne que dans ff et chrome et pas dans IE8 et IE9.
Word-break: break-all; ne fonctionne pas non plus.

3
Prachi

J'ai eu un bon succès dans Chrome, Firefox et IE en utilisant:

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

Dans mon cas de problème, j'utilisais:

display: table-cell;

et j'ai fini par devoir inclure

max-width: 440px;

pour envelopper dans tous les navigateurs. Dans la plupart des cas, la largeur maximale n'était pas nécessaire. En utilisant

Word-break: break-all;

ne fonctionne pas bien dans IE car bien que les mots longs sans espaces soient encapsulés, les mots courts arrêtent également l’encapsulation dans les espaces.

1
Darren Reimer

J'ai récemment combattu cela dans Angular entre IE/Edge et Chrome. Voici ce que j'ai trouvé qui fonctionnait pour moi

  overflow-wrap: break-Word;
  Word-wrap: break-Word;

Cela m'a donné le meilleur des deux. Cela briserait la Parole qui était trop longue, mais contrairement à Word-break, elle ne briserait pas le milieu de la Parole.

0
GR Envoy