web-dev-qa-db-fra.com

Comment imiter Word-break: break-Word; pour IE9, IE11 et Firefox

Comment imiter Word-break: break-Word; pour IE9, IE11 et Firefox?

Il semble fonctionner dans Chrome. J'ai appris et compris qu'il s'agit d'un kit Web non standard uniquement.

Pour info, j'ai essayé d'utiliser,

white-space: pre-wrap;

Et certains plus comme,

   overflow-wrap: break-Word;

A également essayé le CSS mentionné ci-dessous,

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

Mais cela ne semble pas fonctionner.

Je ne peux pas fournir une largeur fixe à la portée (qui contient le texte) en lui faisant display: block; explicitement car le texte est dynamique et différera selon la géolocalisation de l'utilisateur. Actuellement, nous prenons en charge environ 18 langues.

Voici à quoi ressemble le code,

Le html,

<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>

Le CSS,

#theSpan{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera 7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   Word-wrap: break-Word;      /* IE */
   Word-break: break-all;
}

#grid2{
   width: 100px;
}

Ça ressemble à ça,

enter image description here

Je veux que ce soit comme,

enter image description here

Veuillez noter:
J'ai dû utiliser Word-break: break-all; comme pour certaines langues, le texte traduit est trop long et déborde de la grille. Le texte "Support produit" est dynamique.

Mise à jour:
J'ai une largeur fixe pour le div avec id, grid2. Dans l'une des langues, le texte traduit est trop long, c'est un seul mot et il sort de la grille2 div.

Mis à jour le code aussi.

htmlcssgoogle-chromeinternet-explorerfirefox
14
Sudhansu Choudhary

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

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

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

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.

15
Darren Reimer

Utilisation display:table-caption pour réaliser ce que vous recherchez.

DEMO EN DIRECT

Le HTML: 

<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>

Le CSS: 

#theSpan{
  display:table-caption;
}

J'espère que cela t'aides.

0
Nitesh