La etiqueta “pre” no se encoge. No muestra la barra de desplazamiento horizontal

2 minutos de lectura

Muestro mucho código en mi sitio. El resto de mi sitio responde, pero la etiqueta “pre” se niega a encogerse y mostrar barras de desplazamiento horizontales. Aquí hay una captura de pantalla de mi contenido cortado debido a la larga etiqueta “pre” en la parte superior:

ingrese la descripción de la imagen aquí

Estoy usando overflow:horizontal, pero puedes ver en el ejemplo que no funciona. Aquí está el enlace real ingrese la descripción del enlace aquí

¡Tan pronto como cambio mi tema, funciona bien! Estoy usando un tema hijo de Genesis Framework…

avatar de usuario
chico waldman

Debe asignar un ancho al elemento, para que el contenido pueda desbordarse. Intenta configurar width: 100vwpor ejemplo, y funcionará.

Si su etiqueta previa tiene margen/relleno a los lados para el diseño real de su sitio web, intente width: calc(100vw - 40px) mientras que en este ejemplo 40px se relaciona con un margen de 20px a ambos lados. Reemplácelo con su propio margen/relleno real.

  • Su comentario anterior funcionó (¡antes de su edición!). Usaste una unidad “vw” que parece solucionar el problema. Establecerlo en “500px” simplemente provoca un ancho fijo y el elemento previo no se reduce más allá de eso. Vuelva a cambiar su comentario al de “vw” y lo marcaré como respondido: D

    – Parque Bhagwad Jal

    23 de agosto de 2016 a las 16:48


  • Al principio pensé en el porcentaje, pero eso no funcionaría ya que su padre no tiene un ancho fijo y tampoco lo tiene. vw parecía cortar la frase (no se mostraba) y también parecía una solución barata. Pero si te funciona, mejor que mejor. Lo volví a cambiar 🙂

    -Guy Waldman

    23 de agosto de 2016 a las 16:55

  • Sí, lo siento, no me di cuenta. La respuesta original fue width: 100vw.

    -Guy Waldman

    23 de agosto de 2016 a las 17:02

No sé por qué nadie dio la respuesta de:

pre {
   white-space: pre-wrap;
}

Conserva las líneas y las palabras y, al mismo tiempo, envuelve las líneas si no hay suficiente espacio.

  • Resolvió mi problema. Gracias @VocoJax

    –Siraj Alam

    1 jun 2018 a las 19:01

  • Envolver líneas o mostrar un desplazamiento horizontal son dos comportamientos diferentes.

    – Jarad

    28 de febrero de 2021 a las 8:31

La etiqueta previa muestra el texto preformateado, conserva los espacios y los saltos de línea y es fijo. Declare el espacio en blanco normal o pre-envuelto.

pre {
white-space: normal;
}

  • Esto simplemente hace que las líneas se rompan. No quiero que se rompan. Quiero que sean una línea completa y muestren una barra de desplazamiento horizontal para que el usuario pueda desplazarse para ver el código completo…

    – Parque Bhagwad Jal

    23 de agosto de 2016 a las 16:42

  • Si haces espacios en blanco como de costumbre. No hay sentido de usar pre

    –Siraj Alam

    1 jun 2018 a las 19:01

  • En la respuesta anterior con pre-wrap dijiste que resolvió tu problema, y ​​me diste -1. Sin embargo, si lees mi respuesta, notarás que dije lo mismo.

    – Vcaso

    7 junio 2018 a las 21:15

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad