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é
200696 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

2voto

shayuna Points 26

Pour que la rupture intelligente (break-word) fonctionne bien sur différents navigateurs, ce qui a fonctionné pour moi était l'ensemble des règles suivantes :

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we'll settle for break-all */
    }
}

Répondu el 6 de Mars, 2018 par shayuna (26 Points )

Answer 3

1voto

Utilisateur non enregistré Points 0

Ce code fonctionne également :

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

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

</body></html>

Répondu el 1 de Février, 2019 par Utilisateur non enregistré (0 Points )

Answer 4

1voto

Balaji Points 11

word-wrap la propriété travaille avec display:inline-block :

display: inline-block;
word-wrap: break-word;
width: 100px;

Répondu el 1 de Février, 2019 par Balaji (11 Points )

Answer 5

1voto

Ritu Gupta Points 41

inline-block n'est d'aucune utilité dans ce scénario

SOLUTION

word-break: normal|break-all|keep-all|break-word|initial|inherit;
La réponse simple à votre doute est Utilisez ce qui précède et assurez-vous que white-space: nowrap n'est pas utilisé.

NOTE POUR UNE MEILLEURE COMPRÉHENSION :

word-wrap / overflow-wrap est utilisé pour briser les mots qui débordent de leur conteneur
word-break casse tous les mots à la fin d'une ligne, même ceux qui devraient normalement s'étendre sur une autre ligne et ne pas dépasser leur conteneur.
word-wrap est le bien historique et non standard. Il a été renommé en overflow-wrap mais reste un alias, que les navigateurs doivent supporter à l'avenir. Beaucoup de navigateurs (surtout les anciens) ne supportent pas overflow-wrap et exigent word-wrap comme solution de rechange (qui est supportée par tous).
Si vous voulez satisfaire le W3C, vous devriez envisager d'associer les deux dans votre CSS. Si vous ne le faites pas, l'utilisation de word-wrap seul, c'est très bien.

Répondu el 18 de Septembre, 2020 par Ritu Gupta (41 Points )

Answer 6

0voto

Rehan Rajpoot Points 51

Il suffit de spécifier que la largeur du conteneur est de 100, puis d'ajouter display: block .

<div class="parent"><span>dummy text dummy text dummy text dummy text </span></div>
.parent
{
width:100%;
display:block
}

Répondu el 17 de Septembre, 2021 par Rehan Rajpoot (51 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: