word-wrap break-word ne fonctionne pas dans cet exemple

Question

word-wrap break-word ne fonctionne pas dans cet exemple

Demandé el 24 de Mai, 2012: Quand la question a-t-elle été
200695 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'arrive pas à faire fonctionner le word-wrap avec cet exemple...

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

Je me souviens avoir lu qu'il fallait spécifier une mise en page (ce que j'ai fait), mais à part cela, je ne suis pas sûr de ce que je dois faire pour que cela fonctionne. J'aimerais vraiment que cela fonctionne dans Firefox. Merci.

EDIT : Échec dans Chrome 19 et Firefox 12, cela fonctionne dans IE8. J'ai essayé doctype strict et transitionnel, aucun des deux n'a fonctionné.

Demandé el 24 de Mai, 2012 par b10hazard

Answer 1

5 Réponses

Answer 2

120voto

Stencil Points 1090

Mozilla Firefox solution

Ajouter :

display: inline-block;

au style de votre td .

**Les navigateurs basés sur Webkit ( Google Chrome , Safari , ...) solution**

Ajouter :

display: inline-block;
word-break: break-word;

au style de votre td .

Note : Peu importe, pour l'instant, break-word ne fait pas partie de la spécification standard de webkit ; par conséquent, vous pourriez être intéressé par l'utilisation de l'option break-all à la place. Cette valeur alternative offre une solution sans doute radicale, mais elle est conforme à la norme.

Opéra solution

Ajouter :

display: inline-block;
word-break: break-word;

au style de votre td .

Le paragraphe précédent s'applique à Opera de manière similaire.

Répondu el 24 de Mai, 2012 par Stencil (1090 Points )

Answer 3

51voto

Farsheed Points 397

Word-Break n'a rien à voir avec inline-block .

Assurez-vous de spécifier width et remarquez s'il y a des attributs prioritaires dans les nœuds parents. Assurez-vous qu'il n'y a pas white-space: nowrap .

voir este codepen

<html>

<head>
</head>

<body>
  <style scoped>
    .parent {
      width: 100vw;
    }

    p {
      border: 1px dashed black;
      padding: 1em;
      font-size: calc(0.6vw + 0.6em);
      direction: ltr;
      width: 30vw;
      margin:auto;
      text-align:justify;
      word-break: break-word;
      white-space: pre-line;
      overflow-wrap: break-word;
      -ms-word-break: break-word;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    }
  </style>
  <div class="parent">

    <p>
      Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
      the standard.

    </p>

  </div>

</body>

</html>

Répondu el 4 de Novembre, 2019 par Farsheed (397 Points )

Answer 4

48voto

Sunny S.M Points 2465

Utilisez ce code ( extrait de css-tricks ) qui fonctionnera sur tous les navigateurs

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;

Répondu el 19 de Octobre, 2015 par Sunny S.M (2465 Points )

Answer 5

19voto

Rubel Hossain Points 1020

max-width: 100px;
white-space: break-spaces;

Répondu el 9 de Avril, 2021 par Rubel Hossain (1020 Points )

Answer 6

9voto

D.Dimitrioglo Points 1375

Cette combinaison de propriétés m'a aidé :

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;

Répondu el 11 de Septembre, 2015 par D.Dimitrioglo (1375 Points )

word-wrap break-word ne fonctionne pas dans cet exemple

Réponses

Mozilla Firefox solution

**Les navigateurs basés sur Webkit ( Google Chrome , Safari , ...) solution**

Opéra solution

Questions en vedette

Top Tags

Prograide.com

Powered by:

word-wrap break-word ne fonctionne pas dans cet exemple

Réponses

Mozilla Firefox solution

Les navigateurs basés sur Webkit ( Google Chrome , Safari , ...) solution

Opéra solution

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

**Les navigateurs basés sur Webkit ( Google Chrome , Safari , ...) solution**