web-dev-qa-db-fra.com

Comment envelopper du texte en utilisant CSS?

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

Comment obtenir un texte comme celui-ci à insérer dans CSS?

cssword-wrap
75
keruilin

Essayez de faire ça. Fonctionne pour IE8, FF3.6, Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="Word-wrap: break-Word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>
81
Gaurav Saxena

Si vous tapez "AAAAAAAAAAAAAAAAAAAAAAARARRRRRRRRRRRRRRRRRRRRRRGRGGGGGGGGGGGGGGGGGGGG", vous obtiendrez:

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

J'ai pris mon exemple de deux sites Web différents sur Google. J'ai testé cela sur ff 5.0, IE 8.0, et Chrome 10.). Cela fonctionne sur tous.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    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+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    Word-break: break-all;
    white-space: normal;
}

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

Cela fonctionnera partout.

<body>
  <table style="table-layout:fixed;">
  <tr>
    <td><div style="Word-wrap: break-Word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
  </tr>
  </table>
 </body>
1
Atul.Bajare

Avec text-wrap , la prise en charge du navigateur est relativement faible (comme on pourrait s'y attendre d'un brouillon de spécification).

Vous feriez mieux de prendre des mesures pour vous assurer que les données ne comportent pas de longues chaînes d'espaces non blancs.

1
Quentin

La meilleure option si vous ne pouvez pas contrôler l'entrée utilisateur, c'est d'établir la propriété css, débordement: hidden, donc si la chaîne est supérieure à la largeur, elle ne déformera pas le dessin.

édité:

J'aime la réponse: "Word-wrap: break-Word", et pour les navigateurs qui ne le prennent pas en charge, par exemple IE6 ou IE7, j'utiliserais ma solution.

0
netadictos