¿Cómo desactivar el ajuste de palabras en HTML?

518

Me siento tonto por no ser capaz de resolver esto, pero ¿cómo apago el wordwrap? el css word-wrappropiedad puede ser forzado con break-word, pero no puede ser forzado fuera (sólo puede ser dejado a solas con normalvalor).

¿Cómo fuerzo Ajuste de línea fuera ?

html css word-wrap Alexander Bird
fuente

Respuestas:

853

Necesita usar el white-spaceatributo CSS .

En particular, white-space: nowrapy white-space: preson los valores más utilizados. El primero parece ser lo que buscas.

Jon
fuente
25

Se agregaron valores específicos del webkit que faltan desde arriba

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

Me pregunto por qué encuentra como solución el "espacio en blanco" con "nowrap" o "pre", no está haciendo el comportamiento correcto: ¡fuerza su texto en una sola línea! El texto debe dividir las líneas, pero no las palabras por defecto. Esto es causado por algunos atributos css: ajuste de palabra, ajuste de desbordamiento, salto de palabra y guiones. Entonces puedes tener:

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

Entonces, la solución es eliminarlos, o anularlos con "unset" o "normal":

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

ACTUALIZACIÓN: también proporciono pruebas con JSfiddle: https://jsfiddle.net/azozp8rr/

zod
fuente
1
Entiendo por qué quieres romper las palabras en general. Pero asumir que no hay una razón válida para cambiar el formato de las palabras no tiene sentido para mí. Intenté rápidamente probar su solución "no establecida", y todavía tenía el ajuste de palabras. Si cree que debería funcionar, proporcione un jsfiddle que lo demuestre funcionando.
Alexander Bird
No sé por qué mi respuesta desapareció. Una vez más, puede forzar un forro, generalmente la gente lo hace por botones. Pero creo que es un mal diseño por razones receptivas, porque los textos podrían salir del contenedor. De todos modos, la pregunta era sobre el ajuste de palabras: palabra de descanso, forzado, y usted preguntaba cómo forzar la salida. Entonces, proporcioné el código para hacerlo. El espacio en blanco: nowrap es otra cosa, y no está eliminando palabras que rompen, está eliminando líneas enteras. También proporciono una comparación del código con JSfiddle: https://jsfiddle.net/azozp8rr/
zod
2

Esto funcionó para mí para evitar que ocurrieran descansos tontos en las áreas de texto de Chrome

word-break: keep-all;
Ryan Charmley
fuente