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




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






Como registrar una marca o nombre comercial

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-18
  • Categorias: WebSite Trucos y tips Noticias Tutorial

Como poner reCAPTCHA en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-18
  • Categorias: Google Diseño Web WebSite Noticias Tutorial

Como crear un Sitemap online

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-16
  • Categorias: RSS XML WebSite webmasters Marketing SEO Herramientas 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