Eliminar viudas y huérfanos con CSS y HTML utilizando white-space

agosto 10, 2015 9:17 pm Publicado por Deja tus comentarios

La eterna lucha por eliminar viudas y huérfanos en los proyectos editoriales, siempre había sido una tarea descartada para los sitios web. La buena noticia, es que con un mínimo conocimiento de html y una clase CSS muy sencilla de usar podemos tener un mejor control sobre esto. Cabe aclarar y estoy casi seguro que estarán de acuerdo conmigo, que normalmente estos molestos errores sólo los vemos nosotros pero jamás los clientes en sus múltiples tandas de cambios.

Utilizaremos la etiqueta span, y haciendo uso del atributo clase, le asignaremos la propiedad white-space. Es decir, utilizando código html básico le diremos a través de un estilo CSS que le aplique la propiedad white-space, para eliminar la posibilidad que el final del párrafo quede con una sola palabra flotando.


///////////////////////
//HTML
///////////////////////

<p>
Este es nuestro párrafo de prueba, sed in tellus volutpat, dictum lectus ac, rhoncus nisl. Fusce sed dictum nulla, sit amet commodo nisi. Suspendisse magna felis, tempor eget ligula ut, auctor commodo sapien. Praesent urna nulla, imperdiet sit amet ullamcorper et, porttitor quis quam. Aliquam molestie felis nisi, at aliquet dui ultricies non. Etiam eu orci ac arcu ultrices imperdiet ut facilisis lacus. Vivamus quis urna congue, eleifend urna quis, <span class="no-partir">luctus metus</span>;.
</p>


/////////////////////////
//CSS
/////////////////////////
.no-partir{
  white-space:nowrap;
}


Categorizado en: ,

Esta entrada fue escrita porAndrei Olea