white-space

<< text-indent tab-size >>

Esta propiedad te permite establecer un cierto comportamiento de los espaciados. Los valores más habituales que suele tener son: normal | nowrap | pre | pre-line | pre-wrap. Por defecto el valor es normal (transforma múltiples espacios en blanco en un solo espacio consecutivo), pero las otras opciones nos permite:

  • normal: Los espacios se transforman en uno solo, se ajusta al contenedor.
  • nowrap: Los espacios se transforman en uno solo, ignora los saltos de línea.
  • pre: Respeta los espacios, pero ignora los saltos de línea
  • pre-wrap: Respeta los espacios y se ajusta al contenedor
  • pre-line: Respeta literalmente los espacios y suprime los espacios del final. Se ajusta al contenedor.

La diferencia entre pre-wrap y pre-line es que este último sí respeta liteteralmente los espacios que están antes del texto, mientras que si sobran después del texto los elimina.

div {
    /* Se aplica el último valor que se encuentra en el caso de tener 2 
    propiedades con valores distintos */
     color: orange; 
     border: 2px solid red;
     margin: 2px;
}
#destacado{
    line-height: 3em;
    text-indent: 5vw;    
}
h1{
    border: 2px solid ;
    width: 300px;
    white-space: wrap;
}

<< text-indent tab-size >>