Comment désactiver l'habillage de mots en HTML?

518

Je me sens stupide de ne pas pouvoir comprendre cela, mais comment désactiver le retour à la ligne? la css word-wrappropriété peut être forcé avec break-word, mais ne peut pas être forcé de (ne peut être laissé seul avec la normalvaleur).

Comment puis-je forcer mot envelopper au large ?

html css word-wrap Alexander Bird
la source

Réponses:

853

Vous devez utiliser l' white-spaceattribut CSS .

En particulier, white-space: nowrapet white-space: presont les valeurs les plus couramment utilisées. Le premier semble être ce que vous recherchez.

Jon
la source
25

Ajout de valeurs spécifiques au webkit manquantes ci-dessus

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */
Matas Vaitkevicius
la source
3

Je me demande pourquoi vous trouvez comme solution le "white-space" avec "nowrap" ou "pre", il ne fait pas le bon comportement: vous forcez votre texte sur une seule ligne! Le texte doit rompre les lignes, mais pas les mots par défaut. Cela est dû à certains attributs CSS: retour à la ligne, débordement, retour à la ligne et tirets. Vous pouvez donc avoir soit:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

La solution consiste donc à les supprimer ou à les remplacer par "unset" ou "normal":

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

MISE À JOUR: je fournis également une preuve avec JSfiddle: https://jsfiddle.net/azozp8rr/

zod
la source
1
Je comprends pourquoi vous voulez rompre avec les mots en général. Mais supposer qu'il n'y a pas de raison valable de tourner la page n'est pas logique pour moi. J'ai rapidement essayé de tester votre solution "non définie", et elle avait toujours un habillage de mots. Si vous pensez que cela devrait fonctionner, veuillez fournir une démonstration de jsfiddle pour le faire fonctionner.
Alexander Bird
Je ne sais pas pourquoi ma réponse a disparu. Encore une fois, vous pouvez forcer nowrap, généralement les gens le font pour les boutons. Mais je pense que c'est une mauvaise conception pour des raisons de réactivité, car les textes pourraient sortir du conteneur. Quoi qu'il en soit, la question portait sur le retour à la ligne: break-word, forcé, et vous demandiez comment forcer. J'ai donc fourni le code pour le faire. L'espace: nowrap est une autre chose, et il ne supprime pas les mots cassants, il supprime les lignes entières. Je fournis également une comparaison du code avec JSfiddle: https://jsfiddle.net/azozp8rr/
zod
2

Cela a fonctionné pour moi pour empêcher les interruptions de travail stupides de se produire dans les zones de texte Chrome

word-break: keep-all;
Ryan Charmley
la source