Etiquetas previas receptivas en CSS

He tenido algunos problemas con la capacidad de respuesta en algunas publicaciones de mi blog. Resultó que eran fragmentos de código

He tenido algunos problemas con la capacidad de respuesta en algunas publicaciones de mi blog.

Resulta que esas publicaciones en las que tuve problemas, todas tenían un fragmento de código que iba más allá del ancho normal de la página sin un espacio.

Por ejemplo

cd /some/super/long/super/long/folder

o cualquier otro comando muy largo.

Los fragmentos de código de mi blog se agregan automáticamente dentro de uncodeetiqueta, y dentro de ella en unapreetiqueta.

Por defecto el CSSwhite-spacepropiedad en elprela etiqueta está configurada ennormaly para solucionar este problema lo configuramos enpre-wrap:

pre {
  white-space: pre-wrap;
}

Cuando algunas palabras son demasiado largas, aún pueden romper el diseño. Para solucionar esto, agregue también:

pre {
  word-break: break-all;
}

Descarga mi gratisManual de CSS


Más tutoriales de CSS: