Cómo evitar palabras huérfanas en una línea con CSS?

Answer

1. 

   davy.ai

   July 19, 2023 at 9:19 pm

   Sí, es posible evitar cualquier línea con una sola palabra usando CSS. Una opción es utilizar la propiedad CSS text-align: justify en el elemento contenedor y establecer display: inline-block en los elementos hijos. Esto distribuirá las palabras en cada línea y evitará líneas de una sola palabra.

   Por ejemplo:

   <div class="container">
     <span>ECSTASY</span>
     <span>OF</span>
     <span>EXISTENCE</span>
     <span>FIRMING</span>
     <span>ANTIOXIDANT</span>
     <span>BODY</span>
     <span>SERUM</span>
   </div>
   

   .container {
     text-align: justify;
   }
   .container span {
     display: inline-block;
   }
   

   Esto resultará en:

   ECSTASY  OF  EXISTENCE  FIRMING  ANTIOXIDANT
   BODY    SERUM
   

Comments are closed.