Inicia sesión




Conseguir que los elementos pre y code no se salgan del contenedor

Conseguir que los elementos pre y code no se salgan del contenedorPor defecto, el contenido de los elmentos <pre> (tipo block) y <code> (tipo inline) no pasa a una nueva línea cuándo su longitud supera a la anchura del elemento contenedor. El contenedor no «envuelve» (wrap) al contenido. Esto se debe a que en estos elementos se preservan las nuevas líneas (newlines) y los espacios en blanco (white-space) tal cuál son y no se generan saltos de línea (linebreaks) cuándo la anchura del contenido supera al contenedor.

En algunas situaciones, los elementos <pre> y <code> son los más apropiados pero se quiere evitar que puedan quedar fuera del contenedor. El siguiente snippet CSS hace precisamente eso, preserve (preservar) y wrap (envolver), de modo que el navegador «preserva» los saltos de línea y los white-space pero «envuelve» al contenido generando un salto de línea si es necesario.
pre, code {
    white-space: pre-wrap; //estandar
    white-space: -moz-pre-wrap; //Firefox
    white-space: -o-pre-wrap; //Opera
    word-wrap: break-word; //IE
}

Resultado


Nota como en la versión con white-space: pre-wrap, se conservan todos los espacios en blanco y el salto de línea original pero el contenido queda envuelto completamente por el contenedor: Ver resultado...

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-05
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial

Conseguir que los elementos pre y code no se salgan del contenedor
Conseguir que los elementos pre y code no se salgan del contenedor Conseguir que los elementos pre y code no se salgan del contenedor...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Go4Rex El Salvador es la mejor opción para una experiencia comercial perfecta

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-08
  • Categorias: criptomoneda Forex Noticias Tutorial

Que es marketing de eventos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-07
  • Categorias: Post Patrocinados Coobis Marketing Noticias Tutorial

Cómo analizar el rendimiento del sitio web con Lighthouse

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-05
  • Categorias: Diseño Web WebSite webmasters Optimizacion Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial